Vue3 + Electron框架读取程序外部配置文件

网上找了一堆都不行，根据这个步骤来肯定能用

1. 在项目下新建一个config.json文件

2. json文件中写入一些配置

3. vue.config.js中配置打包时把config.json文件copy到应用目录下

  pluginOptions:{electronBuilder:{nodeIntegration:true,builderOptions: {extraResources: [{ "from": "./config.json", "to": "../" }],nsis: {allowToChangeInstallationDirectory: true,oneClick: false,installerIcon: "./public/safeicon.ico", //安装logoinstallerHeaderIcon: "./public/safeicon.ico" //安装logo},win: {icon: './public/safeicon.ico' //打包windows版本的logo},productName: "APP", //应用的名称}}}

4. 修改 electorn 的入口文件 background.js 配置

  const mainWindow = new BrowserWindow({width: 800,height: 600,title: 'APPName',webPreferences: {nodeIntegration: true,  // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力enableRemoteModule: true, // 是否允许使用remotecontextIsolation: false,// 加载本地图片webSecurity: false, // 允许跨域webviewTag: true // 允许webview},icon: "app://./safeicon.ico",show: false,autoHideMenuBar: true, // 隐藏顶部工具栏，生产环境时设置为trueframe: false // 无边框})

主要是开启这两个配置

nodeIntegration: true, // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力
enableRemoteModule: true, // 是否允许使用remote

5. 新增工具类 src\utils\getConfig.js

const path = window.require && window.require("path");
const fs = window.require && window.require("fs");
const electron = window.require && window.require('electron')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("C:");return path.dirname(electron.remote.app.getPath("exe"));
}
/**** @returns 获取配置文件路径*/
export function getConfigPath() {if (getSystem() === 1) {return getExePath() + "/config.json";} else {return getExePath() + "\\config.json";}
}
/*** 读取配置文件*/
export function readConfig() {return new Promise((res, rej) => {console.log("fs", fs)fs.readFile(getConfigPath(), "utf-8", (err, data) => {let config = ""if (data) {//有值config = JSON.parse(data)}res(config)})})
}

6. 使用读取配置

import { readConfig } from '@/utils/getConfig.js'if (process.env.NODE_ENV !== "development") {(async function () {const res = await readConfig()console.log(res);axios.defaults.baseURL = "http://"+res.ip+":"+res.port;})()
} else {axios.defaults.baseURL = "/api";
}