electron暴露配置文件(用户可随时修改)

配置文件

一般web前端项目配置文件,写死的放在src/config下,需要打包配置的放在.env文件中。但在electron项目中,如果配置数据更改,需要每次给用户打包升级肯定是行不通的。于是外部配置文件就是有必要的,具体实现方法也比较简单,通过fs去读写外部文件就可实现

具体实现

设置文件不被压缩混淆

比如配置文件放在根目录的config文件夹

配置electron- builder文件,我这里是yml配置

复制代码
...
productName: xxx
asarUnpack:
  - resources/**
extraResources:
  - ./config
...

extraResources属性添加文件夹名称

打包后路径为/resources/config/...可以打包后查看

获取路径

process.cwd()

此时获取是node服务的根路径,再拼接上本地文件的路径

dev环境为项目根目录

prod环境为安装后文件夹路径

复制代码
const path = process.cwd()
const filePath = is.dev
  ? join(path, '/config/app.properties)
  : join(path, '/resources/config/app.properties')

读写文件

这里用到了fspathini等node模块,所以不可以在renderer里面操作,要通过主进程handle通信到渲染进程获取

复制代码
npm i ini


class ConfigHandle {
  private getConfig(_: IpcMainInvokeEvent) {
    return new Promise((resolve, reject) => {
      fs.readFile(filePath, 'utf8', function (err, dataStr) {
        if (err) {
          return reject(err.message)
        }
        resolve(ini.parse(dataStr.toString()))
      })
    })
  }

  private setConfig(_: IpcMainInvokeEvent, config) {
    return new Promise((resolve, reject) => {
      fs.readFile(filePath, 'utf8', function (err, dataStr) {
        if (err) {
          return reject(err.message)
        }
        const origin = ini.parse(dataStr.toString())
        // 这里做了先读取再assign操作,不会全量覆盖
        fs.writeFile(filePath, ini.stringify(Object.assign(origin, config)), function (err) {
          if (err) {
            return reject(err.message)
          }
          resolve('success')
        })
      })
    })
  }

  register() {
    ipcMain.handle('get-config', this.getConfig)
    ipcMain.handle('set-config', this.setConfig)
  }
}

通信到renderer

  • main

    configHandle.register()

  • preload

    const api = {
    config: {
    get: () => ipcRenderer.invoke('get-config'),
    set: (config: object) => ipcRenderer.invoke('set-config', config)
    }
    }

    contextBridge.exposeInMainWorld('api', api)

  • renderer

    export const config = await window.api.config.get()
    export const setConfig = config => window.api.config.set(config)

    const baseUrl = config.baseUrl

    setConfig({baseUrl: "http://xxx"})

这样可以通过程序修改配置文件,或者用户自己编辑修改配置文件

  • config/app.properties

    title=good title
    baseUrl=great url
    defaultPassword=unbelievable pwd

通过ini.parse会转成json格式,非常方便

相关推荐
gnip2 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu6 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu6 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu7 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript