electron-vue 項目啟動動態獲取配置文件中的後端服務地址

前言

　　最近的項目迭代中新增一個需求，需要在electron-vue 項目打包之後，啟動exe 可執行程式的時候，動態獲取配置文件中的 baseUrl 作為服務端的地址。electron 可以使用 node 的 fs 模組來讀取配置文件，但是在項目打包之後項目的靜態資源都會被編譯成其他文件，本文來記錄下相關實現和知識點。

正文

　　1、根目錄下創建配置文件 config.conf，裡面寫入baseUrl （注意這裡通過 json 格式寫入），如下：

 

 

 

 　　2、配置打包時對資源進行複製，在 package.json 中修改build的配置

 

　　這裡需要注意 electron-builder 中兩個常用的配置選項：extraResources 拷貝資源到打包後文件的 Resources 目錄中，extraFiles 拷貝資源到打包目錄的根路徑下，這裡使用extraResources ,其中 from 表示需要打包的資源文件路徑，to 值為 「../」 表示根路徑。

　　3、在項目啟動的時候通過node 的 fs 模組讀取配置文件數據，並替換為 baseUrl

　　(1) 創建getBaseUrl.js 文件實現讀取操作，並返回讀取數據，如下：

 

 　　程式碼如下：

const { app } = require("electron").remote;
const path = require("path");
const fs = require("fs");

export function getSystem() {
  //這是mac系統
  if (process.platform == "darwin") {
    return 1;
  }
  //這是windows系統
  if (process.platform == "win32") {
    return 2;
  }
  //這是linux系統
  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文件中調用該函數，非同步改變baseUrl

<script>
import { readConfig } from "@/utils/getBaseUrl.js";
mounted() {
    readConfig((res) => {
      const { baseURL } = res;
       this.$message.success({ content: `ws://${baseURL}/websocket` });
       // ... 執行其他操作即可
    });
}
</script>

　　4、測試

　　打包之後配置文件會被拷貝過來

 　　同樣，頁面也能拿到對應的數據，這樣就可以通過修改配置文件，動態修改連接服務端ip了。

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

Tags:

VirMach 便宜 VPS

QNews

QNews