electron-builder打包React TS Electron应用时报错找不到.env文件如何解决

• 第一步：配置electron-builder的额外资源规则
  在项目的package.json中新增build.extraResources配置，指定将.env文件复制到打包产物的资源目录：

{
  "build": {
    // 其余原有配置保持不变
    "extraResources": [
      {
        "from": "./.env",
        "to": "./"
      }
    ]
  }
}

如果是使用单独的electron-builder.yml配置文件，添加如下配置：

extraResources:
  - from: "./.env"
    to: "./"

• 第二步：调整代码中.env的读取路径
  本地开发和打包后的运行路径不同，需要动态适配路径再加载环境变量，主进程代码示例：

import { app } from 'electron';
import path from 'path';
import fs from 'fs';
import dotenv from 'dotenv';

// 动态计算.env文件路径
const getEnvPath = () => {
  if (app.isPackaged) {
    // 打包后路径：资源目录下
    return path.join(process.resourcesPath, '.env');
  }
  // 开发环境路径：根据你的项目根目录相对位置调整，确保能命中根目录的.env
  return path.join(__dirname, '../../.env');
};

const envPath = getEnvPath();
if (fs.existsSync(envPath)) {
  dotenv.config({ path: envPath });
} else {
  throw new Error(`环境变量文件未找到: ${envPath}`);
}

• 补充注意事项

如果你的.env文件包含密钥、接口令牌等敏感信息，不建议直接打包到公开分发的应用包中，可考虑在打包阶段通过CI/CD环境变量注入，或者运行时从服务端拉取敏感配置。

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