electron暴露配置檔案（使用者可隨時修改）

大禹不治水發表於2024-03-07

配置檔案

一般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')

讀寫檔案

這裡用到了fs、path、ini等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格式，非常方便

相關文章