〔Electron〕应用程序配置文件

大林鸱大约 2 分钟

打包后的 Electron 程序，如何动态改变配置文件内容？我们通过向 static 文件夹下放至一个 setting.json5 文件，解决动态修改应用程序配置的问题。

桌面版的应用程序通常会提供设置界面，用于定制应用程序界面和控制应用程序行为，一般将这些配置信息保存在文件中或者数据库中。当前我正研发一个基于 Electron 的桌面应用程序，需要使用配置文件设置后端服务访问地址。我是怎么解决的呢？

项目使用 Electron+Vue3+Vite 技术路线。

1.增加一个 setting.json5 文件作为配置文件，将文件放置到 static 文件夹下。放置到 static 文件夹下的目的是随着安装程序一起被安装到指定文件夹下。

配置文件内容：

{
  URL: 'https://www.gremlins-book.com/'
}

2.在主进程的中增加读取配置文件的方法

ipc-main 文件中新增如下方法：

const fs = require('fs')
const JSON5 = require('json5')

//你需要修改具体路径
const getSettingPath = () => {
  return env !== 'development'
    ? join(__dirname, '..', 'renderer/setting.json5').replace(/\\/g, '\\\\')
    ? join(__dirname, '..', '..', '..', 'static/setting.json5').replace(/\\/g, '\\\\')
}

const readSetting = () => {
  return JSON5.parse(fs.readFileSync(getSettingPath(), 'utf-8'))
}

//在ipc-main中增加
ipcMain.handle('setting', (event, args) => {
  return new Promise((resolve, reject) => {
    try{
      resolve(readSetting())
    }catch(error){
      console.log('错误处理')
      reject({})
    }
  })
})

3.在 main.ts 中通过 ipc-renderer 调用 setting

const { ipcRenderer } = window
app.config.globalProperties.setting = await ipcRenderer.invoke('setting')

4.使用记事本打开 setting.json5

const exec = require('exec')
const path = getSettingPath()

exec(`notepad ${path}`, (err, stdout, stderr) => {
  if (err) {
    console.log('检查配置文件路径是否正确')
  }
})