Electron生产环境能否使用dotenv？如何解决打包后变量失效问题？

生产环境完全可以正常使用dotenv，打包后变量返回undefined不是dotenv的兼容性问题，是路径配置、打包规则、进程上下文差异导致的，按以下步骤配置即可解决。

核心失效原因 #

• dotenv默认从process.cwd()路径下读取.env文件，开发阶段运行目录是项目根目录，能正常读取配置；打包后应用运行目录是系统下的安装资源路径，默认寻址位置不存在.env文件，自然加载失败。
• 多数React脚手架（CRA、Vite）只会在构建阶段把约定前缀的环境变量静态编译进渲染进程bundle，打包后的渲染进程代码不会动态读取Node层的process.env，未做透传的变量会直接返回undefined。
• 未在electron-builder中配置文件打包规则时，.env文件不会被默认打进安装包，运行时根本找不到目标配置文件。

分步配置方案 #

1. 主进程显式指定dotenv加载路径 #

在主进程入口文件的最顶部引入dotenv，不要使用无参默认配置，通过Electron自带的路径API固定.env的寻址位置，兼容开发、生产双环境：

// 主进程入口（如main.js、electron-main.js）顶部
const { app } = require('electron')
const path = require('path')
require('dotenv').config({
  // 固定指向应用根目录下的.env文件
  path: path.join(app.getAppPath(), '.env')
})

如果有多环境需求，可以根据process.env.NODE_ENV判断，切换加载.env.development、.env.production即可。

2. 配置electron-builder打包.env文件 #

在electron-builder配置中（package.json的build字段或独立的electron-builder.yml），将.env加入打包文件列表，确保安装包内存在对应配置文件：

// package.json 示例配置
{
  "build": {
    "files": [
      "dist/**/*",
      "node_modules/**/*",
      "package.json",
      ".env"
    ]
  }
}

安全提示：如果.env中存储了接口密钥、账号密码等敏感信息，不要将生产环境配置直接打进公开分发的安装包，普通用户解包asar文件即可直接读取明文内容。敏感变量建议通过CI/CD流程在打包阶段动态注入，不要存放在客户端本地配置文件中。

如果不想把.env打进asar包，也可以将文件配置到extraResources字段，打包后放到应用外部资源目录，对应调整第一步中dotenv的path为path.join(process.resourcesPath, '.env')即可。

3. 适配React渲染进程的变量读取 #

React代码运行在渲染进程，默认无法直接访问主进程加载的环境变量，根据场景选以下一种方案配置即可：

• 构建时静态注入（适合非敏感公开变量）
  如果是CRA（create-react-app）搭建的项目，所有渲染进程用到的变量统一加REACT_APP_前缀，脚手架会在构建阶段自动将变量编译进静态资源，打包后可直接通过process.env.REACT_APP_XXX读取；如果是Vite搭建的项目，变量加VITE_前缀，通过import.meta.env.VITE_XXX读取即可，不需要在渲染进程引入dotenv。
• IPC动态透传（适合需要运行时读取的变量）
  通过preload脚本按需将主进程的环境变量暴露给渲染进程，不要直接开启nodeIntegration暴露整个Node环境，避免安全风险：

  // preload.js
  const { contextBridge } = require('electron')
  contextBridge.exposeInMainWorld('appEnv', {
    API_BASE: process.env.API_BASE,
    APP_VERSION: process.env.APP_VERSION
  })
  

  在React代码中直接通过window.appEnv.API_BASE即可读取对应变量，不需要在渲染进程侧加载dotenv。

常见踩坑排查 #

• 不要在渲染进程代码中直接调用require('dotenv').config()，渲染进程运行在浏览器上下文，没有本地文件系统读取权限，必然加载失败。
• 如果使用了vite-plugin-electron、electron-webpack等构建插件，检查插件的环境变量替换配置，避免构建阶段将主进程的process.env调用静态替换为undefined。
• 配置完成后可解包生成的asar文件，检查根目录是否存在.env文件，如果文件缺失优先调整electron-builder的文件打包规则。

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