Electron构建时.env环境变量未识别，求可引入该文件的构建选项

当你用dotenv在开发环境能读取到.env变量，但Electron Builder构建后失效，核心原因是构建过程不会自动将.env变量注入到打包后的应用中。以下是几种可行的解决方案：

方案1：通过Electron Builder的env配置注入变量 #

直接在package.json的build字段中添加env配置，让Electron Builder在构建时自动读取.env中的变量并替换代码里的process.env引用：

修改你的package.json的build部分：

"build": {
    "productName": "NB",
    "appId": "com.nb.electron",
    "asar": true,
    // 新增env配置
    "env": {
      "FIREBASE_API_KEY": "${FIREBASE_API_KEY}",
      "FIREBASE_PROJECT_ID": "${FIREBASE_PROJECT_ID}",
      "FIREBASE_DATABASE_URL": "${FIREBASE_DATABASE_URL}"
    },
    "mac": {
      "target": [
        "default"
      ],
      "icon": "build/icons/icon.icns"
    },
    // 其余现有配置保持不变...
}

这种方式下，Electron Builder会在构建阶段自动从.env文件中读取对应变量，替换代码里的process.env.xxx。开发环境依然需要保留dotenv的配置代码（import { config } from "dotenv"; config();）来读取变量。

方案2：用dotenv-webpack配合Webpack打包主进程 #

如果你的项目用Webpack打包主进程，可以通过dotenv-webpack插件将.env变量注入到打包后的代码中：

1. 安装依赖：

npm install dotenv-webpack --save-dev

2. 在Webpack配置文件中添加插件：

const Dotenv = require('dotenv-webpack');

module.exports = {
  // 其余Webpack配置...
  plugins: [
    new Dotenv()
  ]
};

Webpack在打包主进程时会自动加载.env变量，构建后的代码就能正常读取process.env中的值。

方案3：在预加载脚本中注入环境变量 #

如果以上方法不适用，可以在Electron的预加载脚本中加载.env变量，同时支持主进程和渲染进程使用：

预加载脚本（preload.js）：

const { contextBridge } = require('electron');
require('dotenv').config();

// 暴露给渲染进程（如果需要）
contextBridge.exposeInMainWorld('appEnv', {
  FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
  FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
  FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL
});

// 主进程可直接通过process.env读取变量

然后在主进程窗口配置中指定预加载脚本：

const mainWindow = new BrowserWindow({
  // 其余窗口配置...
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true
  }
});

注意：无论采用哪种方案，务必将.env文件添加到.gitignore中，避免敏感密钥泄露到版本仓库。

内容的提问来源于stack exchange，提问作者이수진