前言
最近的項目迭代中新增一個需求，需要在electron-vue 項目打包之后，啟動exe 可執(zhí)行程序的時候，動態(tài)獲取配置文件中的 baseUrl 作為服務(wù)端的地址。electron 可以使用 node 的 fs 模塊來讀取配置文件，但是在項目打包之后項目的靜態(tài)資源都會被編譯成其他文件，本文來記錄下相關(guān)實現(xiàn)和知識點。
正文
1、根目錄下創(chuàng)建配置文件 config.conf，里面寫入baseUrl （注意這里通過 json 格式寫入），如下：
2、配置打包時對資源進(jìn)行復(fù)制，在 package.json 中修改build的配置
這里需要注意 electron-builder 中兩個常用的配置選項：extraResources 拷貝資源到打包后文件的 Resources 目錄中，extraFiles 拷貝資源到打包目錄的根路徑下，這里使用extraResources ,其中 from 表示需要打包的資源文件路徑，to 值為 “../” 表示根路徑。
3、在項目啟動的時候通過node 的 fs 模塊讀取配置文件數(shù)據(jù)，并替換為 baseUrl
(1) 創(chuàng)建getBaseUrl.js 文件實現(xiàn)讀取操作，并返回讀取數(shù)據(jù)，如下：
代碼如下：
const { app } = require(“electron”).remote;const path = require(“path”);const fs = require(“fs”); export function getSystem() { //這是mac系統(tǒng) if (process.platform == “darwin”) { return 1; } //這是windows系統(tǒng) if (process.platform == “win32”) { return 2; } //這是linux系統(tǒng) if (process.platform == “linux”) { return 3; }}/** * * @returns 獲取安裝路徑 */export function getExePath() { return path.dirname(app.getPath(“exe”));}/** * * @returns 獲取配置文件路徑 */export function getConfigPath() { if (getSystem() === 1) { return getExePath() + “/config.conf”; } else { return getExePath() + “config.conf”; }}/** * 讀取配置文件 */export function readConfig(callback) { fs.readFile(getConfigPath(), “utf-8”, (err, data) => { if (data) { //有值 const config = JSON.parse(data); callback(config); } });}
（2）在項目啟動后加載的vue文件中調(diào)用該函數(shù)，異步改變baseUrl
4、測試
打包之后配置文件會被拷貝過來
同樣，頁面也能拿到對應(yīng)的數(shù)據(jù)，這樣就可以通過修改配置文件，動態(tài)修改連接服務(wù)端ip了。
寫在最后
以上就是本文的全部內(nèi)容，希望給讀者帶來些許的幫助和進(jìn)步，方便的話點個關(guān)注，小白的成長之路會持續(xù)更新一些工作中常見的問題和技術(shù)點。
文章來自https://www.cnblogs.com/zaishiyu/p/16358578.html
