使用electron封裝了前端界面之后，最終打包為一個客戶端（exe）。但是，最近項目組內(nèi)做CS（c++開發(fā)）的，想把所有的配置都放進安裝目錄的配置文件中（比如config.json）。這做法，對于純前端而言有點難以接收。

第一，純前端不允許讀取本地文件。就這一條，直接封死所有的路。
第二，讀取配置，前端可以通過可視化界面存入本地緩存，不必要讀取本地文件。

基于以上兩點，我覺得讀取本地文件不可能實現(xiàn)，況且時間緊任務(wù)重。奈何，前端話語權(quán)微乎其微。

最后，我咬著牙，實現(xiàn)了一下讀取本地文件的需求。如有更好的方案，可以私信評論。

首先，純js肯定干不了讀取本地文件的事情。那么，只能用nodejs了。況且，electron內(nèi)部已經(jīng)集成了nodejs，所以使用nodejs是必然選擇。

讀取本地文件

需要分兩步走。

第一，先獲取本系統(tǒng)的安裝目錄。第二，使用fs讀取config配置文件。具體代碼如下：

// 獲取 exe 的安裝目錄
// 使用electron 內(nèi)部的方法 app.getPath
// 配置文件 background.js 中寫入如下代碼import {app,protocol,BrowserWindow,Menu,Tray,globalShortcut,ipcMain,dialog
} from 'electron';// 獲取安裝目錄
// 這里要注意 獲取的安裝目錄是反斜杠 也就是 c:\dev\xxxx
// 這肯定是不行的  nodejs在使用這種地址是讀取不了的 
// 所以 后邊加了一個replace 用于轉(zhuǎn)換反斜杠
let exePath = path.dirname(app.getPath('exe')).replace(/\\/g, "/");// 拼接好安裝目錄下的config.json
let configPath = `${exePath}/config.json`;// 使用fs讀取文件內(nèi)容
const fs = require('fs');
fs.readFile(configPath, 'utf-8', (err, data) => {if (data) {// 注意要轉(zhuǎn)換jsonconst config = JSON.parse(data)}
})

傳遞數(shù)據(jù)

現(xiàn)在本地數(shù)據(jù)是讀取到了。如何將數(shù)據(jù)傳遞到我們的前端工程中（我用的是vue）？

我想到了兩種辦法。

第一種，通過electron窗口的方法。

// 創(chuàng)建window之后可以使用這個方法傳遞消息
// win是new BrowserWindow
// 注意消息主題是 async-messagewin.webContents.send('async-message', '消息')// 前端js中可以這么接收
import { ipcRenderer } from 'electron';// 注意 監(jiān)聽事件要和上邊保持一致 async-messageipcRenderer.on('async-message', (e, arg) => {console.log('渲染進程===我收到啦', arg)
})

第二種，就是node起一個服務(wù)，就相當(dāng)于寫了一個接口前端再去調(diào)用。

// nodejs 寫一個服務(wù)// 定義一個暫存數(shù)組  用于后邊關(guān)閉并清除socket服務(wù)
var sockets = [];// 創(chuàng)建一個httpserver
const http = require('http');// 創(chuàng)建服務(wù)器對象
const server = http.createServer();
const closeServer = () => { sockets.forEach(function(socket){socket.destroy();});server.close(function(){console.log("close server!");});
}// res.local_port 就是我們上邊讀取本地配置后的內(nèi)容server.listen(res.local_port);// 對錯誤進行捕獲server.on('error', (err) => {if (err.code == 'EADDRINUSE') {// 如果目標(biāo)端口被占用將使用// NodeJS 隨機分配的端口號server.listen(0);}
});// 在成功監(jiān)聽后，向終端輸出被監(jiān)聽的端口號
server.on('listening', () => {console.log('【HTTP Server is running at http://127.0.0.1:' + server.address().port + ' 】')
})server.on("connection",function(socket){sockets.push(socket);//console.log('sockets', sockets);socket.once("close",function(){sockets.splice(sockets.indexOf(socket),1);});
});server.on('request', function (req, res) {const url = req.url;// 接口地址就是 /getInfoif(url === '/getInfo') {res.setHeader('content-type', 'application/json');res.end(ws_path);closeServer();} else {res.writeHeader(404);res.end('404 not found');closeServer();}
})// 前端工程中 請求這個接口 就可以獲取配置信息了axios.get('http://127.0.0.1:3000/getInfo').then(res => {if (res.code == 200) {console.log('這里就是請求本地的配置 -- ', res.data);}
})

就這樣，收工......