React+Electron项目构建时动态配置Axios请求IP路径问题问询

可行解决方案 #

方案1：外置配置到独立可读写目录（最推荐，完全无需修改打包文件） #

• 利用Electron提供的用户数据目录存储配置，该目录应用安装后可自由读写，不需要打包进项目源码
• 首次启动应用时自动生成默认配置文件，后续修改直接编辑该文件，重启应用即可生效，无需重新构建
• 主进程代码示例：

const { app, ipcMain } = require('electron')
const fs = require('fs')
const path = require('path')

// 获取配置文件存储路径
const configPath = path.join(app.getPath('userData'), 'config.json')
// 首次启动初始化默认配置
if (!fs.existsSync(configPath)) {
  const defaultConfig = {
    serverIp: '192.168.1.100',
    serverPort: 8080
  }
  fs.writeFileSync(configPath, JSON.stringify(defaultConfig, null, 2))
}
// 读取配置方法
const loadConfig = () => JSON.parse(fs.readFileSync(configPath, 'utf-8'))
// 向渲染进程暴露配置获取能力
ipcMain.handle('get-config', () => loadConfig())

• 预加载脚本（preload.js）配置（开启上下文隔离时必须）：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  getConfig: () => ipcRenderer.invoke('get-config')
})

• React渲染进程调用示例：

const getApiBaseUrl = async () => {
  const config = await window.electronAPI.getConfig()
  return `http://${config.serverIp}:${config.serverPort}`
}
// 业务接口直接使用返回的baseUrl即可

方案2：将配置文件放在build目录下实现外置修改 #

如果你坚持要把配置放在build文件夹下，需要将该文件排除出asar压缩包（默认build目录会被打进只读的app.asar归档，无法直接修改）

• 在electron打包配置（package.json的build字段或electron-builder.yml）中添加配置：

"asarUnpack": ["build/config.js"]

• 主进程读取该文件的路径为path.join(app.getAppPath(), 'build/config.js')，读取后传给渲染进程即可，后续直接修改打包后解压出来的config.js就可以更新IP配置

注意事项 #

• 不要将IP配置写在src目录下的源码文件中，该目录下的文件会在构建时被编译进静态资源包，修改后必须重新构建才能生效，无法实现动态读取
• 配置修改后默认需要重启应用才能读取到新的配置，也可以新增文件监听逻辑实现热更新，无需重启即可生效

内容的提问来源于stack exchange，提问作者user15368351