Electron-React应用按环境配置baseURL的简易方案咨询

嘿，刚上手Electron就遇到这个配置问题很正常，我给你几个比写复杂脚本更省心的方案，都是实际项目里验证过的：

1. 构建时生成静态配置文件（最直观易维护） #

这个方法完全不依赖运行时环境变量，直接在构建阶段生成一个包含BaseURL的静态配置文件，代码里直接导入就能用：

• 第一步，写个极简的Node脚本set-base-url.js：

const fs = require('fs');
// 从环境变量取BaseURL，没有的话用默认值兜底
const baseUrl = process.env.BASE_URL || 'http://default-api.example.com';
// 生成导出配置的JS文件
const configContent = `export const API_CONFIG = { baseUrl: '${baseUrl}' };`;
fs.writeFileSync('./src/config.js', configContent);

• 第二步，在package.json的构建脚本里先运行这个脚本，再调用electron-builder：

"scripts": {
  "build:prod": "cross-env BASE_URL=http://prod-api.example.com node set-base-url.js && electron-builder",
  "build:dev": "cross-env BASE_URL=http://dev-api.example.com node set-base-url.js && electron-builder"
}

这里用cross-env是为了兼容Windows/Mac/Linux的环境变量设置，安装一下就行：npm install cross-env --save-dev

• 最后，在你的主进程/渲染进程里直接导入配置：

import { API_CONFIG } from './config.js';
// 调用API时用 API_CONFIG.baseUrl + '/someAPI' 即可

构建完成后，config.js是纯静态文件，完全符合你“构建后无法使用环境变量”的要求。

2. 利用electron-builder的extraMetadata（更简洁，无额外脚本） #

如果你不想多写一个脚本文件，可以直接用electron-builder的内置能力，把BaseURL注入到应用的package.json里：

• 首先在package.json的构建脚本里传递环境变量：

"scripts": {
  "build:prod": "cross-env BASE_URL=http://prod-api.example.com electron-builder",
  "build:dev": "cross-env BASE_URL=http://dev-api.example.com electron-builder"
}

• 然后在package.json的build配置里添加extraMetadata，把环境变量的值传进去：

"build": {
  "extraMetadata": {
    "apiBaseUrl": "${BASE_URL}"
  }
}

• 最后在代码里读取这个值：

// 主进程中直接读取
const { app } = require('electron');
const baseUrl = app.metadata.apiBaseUrl || 'http://default-api.example.com';

// 渲染进程可以通过IPC从主进程获取，或者启用remote后直接读取

这个方法完全不需要额外脚本，直接借助electron-builder的能力完成配置注入，非常简洁。

3. 预编译字符串替换（适合简单场景） #

如果你的代码里直接写了占位符（比如http://<baseUrl>/someAPI），可以用字符串替换工具在构建前替换掉：

• 安装依赖：npm install replace-in-file --save-dev
• 修改构建脚本：

"scripts": {
  "build:prod": "cross-env BASE_URL=http://prod-api.example.com replace-in-file \"http://<baseUrl>\" \"$BASE_URL\" ./src/**/*.js && electron-builder"
}

这个方法适合非常简单的场景，不需要额外配置文件，直接替换代码里的占位符就行。

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