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", //安装logo
          installerHeaderIcon: "./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, // 是否允许使用remote
      contextIsolation: false,
      // 加载本地图片
      webSecurity: false, // 允许跨域
      webviewTag: true // 允许webview
    },
    icon: "app://./safeicon.ico",
    show: false,
    autoHideMenuBar: true, // 隐藏顶部工具栏，生产环境时设置为true
    frame: 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";
}

我此处是判断是否是开发环境，不是开发环境下就去读取 config.json 的配置。你们根据实际情况调整。

ctrl + shift + i 开启控制台查看配置已生效