React-Electron项目electron-builder生产构建如何读取ENV环境变量？

方案1：构建时注入环境变量（适合React渲染进程做Admin ID验证的场景） #

你当前用react-scripts打包React代码，它默认只会将REACT_APP_前缀的环境变量注入到构建后的静态资源中，操作步骤如下：

步骤1：配置GitHub仓库密钥 #

进入你的GitHub仓库 → Settings → Secrets and variables → Actions → 点击「New repository secret」，添加密钥：

• 名称：REACT_APP_ADMIN_ID
• 值：你的实际Admin ID

步骤2：修改GitHub Actions配置 #

在构建React的步骤中注入该环境变量，修改后的build.yml对应部分如下：

- name: build react
  run: $env:CI=$false; yarn run build;
  env:
    REACT_APP_ADMIN_ID: ${{ secrets.REACT_APP_ADMIN_ID }}

步骤3：代码读取 #

你在React注册页面的代码里直接用process.env.REACT_APP_ADMIN_ID就能拿到值，开发环境下dotenv读取本地.env里的同名字段也能正常生效，不需要额外调整逻辑。

方案2：Admin ID需要在Electron主进程使用的场景 #

如果你的验证逻辑写在Electron主进程的main.js中，可以选以下两种方式：

方式A：构建时注入主进程 #

1. 同样先在GitHub Secrets中添加名称为ADMIN_ID的密钥
2. 修改打包发布步骤的环境变量：

- name: publish app
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    ADMIN_ID: ${{ secrets.ADMIN_ID }}
  run: yarn run electron-ship

3. 主进程代码中直接读取process.env.ADMIN_ID即可，electron-builder打包时会将该变量固化到主进程执行环境中。

方式B：打包独立.env文件（适合后续需要修改Admin ID无需重打包的场景） #

1. 在build react步骤后新增生成.env的步骤：

- name: generate production env file
  run: echo "ADMIN_ID=${{ secrets.ADMIN_ID }}" > build/.env

2. 在package.json中新增electron-builder的额外资源配置，把.env文件打包到应用资源目录：

"build": {
  "extraResources": [
    {
      "from": "build/.env",
      "to": ".env"
    }
  ]
}

3. 主进程中根据环境判断.env路径读取即可：

const { app } = require('electron')
const path = require('path')
const dotenv = require('dotenv')

if (app.isPackaged) {
  // 生产环境读取打包后的资源路径
  dotenv.config({ path: path.join(process.resourcesPath, '.env') })
} else {
  // 开发环境读根目录的.env
  dotenv.config()
}

注意：如果Admin ID是高敏感值，不建议在前端/客户端本地做验证，本地验证都可以被破解，建议将验证逻辑放到后端服务，客户端仅传递用户输入的Admin ID到后端校验结果。

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