Electron打包后.env文件环境变量未生效，如何解决？

以下是针对开发环境正常加载.env、打包后失效问题的通用解决办法：

• 确保环境变量在打包阶段注入代码
  开发时dotenv可直接读取本地.env文件，但打包后.env不会被包含到安装包中，因此需要在打包过程中将变量注入代码。推荐使用dotenv-webpack插件：

  1. 安装依赖：npm install dotenv-webpack --save-dev
  2. 在webpack配置文件中添加插件：

     const Dotenv = require('dotenv-webpack');
     module.exports = {
       // 其他webpack配置
       plugins: [new Dotenv()]
     };
     

  打包时插件会自动将.env变量替换到代码对应位置，无需运行时读取文件。

• 配置electron-builder注入变量
  若使用electron-builder打包，可直接在package.json的build字段中配置变量注入：

  "build": {
    "win": {
      "target": "nsis"
    },
    "env": {
      "NODE_ENV": "production",
      "CUSTOM_VAR": "${process.env.CUSTOM_VAR}"
    }
  }
  

  配置后，打包产物中的process.env.CUSTOM_VAR会被替换为.env中对应的值。

• 主进程与渲染进程的变量共享
  若渲染进程无法获取环境变量，需在主进程中通过contextBridge将变量暴露给渲染进程：
  主进程代码：

  const { contextBridge } = require('electron');
  contextBridge.exposeInMainWorld('appEnv', {
    API_URL: process.env.API_URL,
    APP_KEY: process.env.APP_KEY
  });
  

  渲染进程中通过window.appEnv.API_URL即可访问对应变量。

• 通过脚本预加载环境变量
  安装cross-env确保跨系统环境变量加载：npm install cross-env --save-dev，然后修改打包脚本：

  "scripts": {
    "package:win": "cross-env-shell \"electron-builder --win\""
  }
  

  执行打包命令时会先加载.env变量，再启动打包流程。

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