Electron JS项目中.env文件无法读取，求解决方法

Electron本身不会自动加载.env文件，需要通过以下配置让变量正常生效，分主进程和渲染场景说明：

1. 安装依赖 #

首先安装dotenv包，用于加载.env文件：

npm install dotenv --save
# 或用yarn
yarn add dotenv

2. 主进程配置 #

在Electron主进程的入口文件（比如main.js）最顶部添加以下代码，确保在其他代码执行前加载环境变量：

require('dotenv').config()

之后就能在主进程中直接通过process.env.SHOPIFY_STORE访问变量。

3. 渲染进程配置 #

渲染进程出于安全限制，默认不能直接访问主进程的process.env，需要分场景处理：

场景一：纯Electron渲染进程 #

1. 在主进程创建窗口时，配置preload脚本路径：

const { BrowserWindow } = require('electron')
const path = require('path')

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true, // 保持上下文隔离（默认开启）
    nodeIntegration: false // 关闭Node集成（默认关闭）
  }
})

2. 创建preload.js文件，通过contextBridge将环境变量暴露给渲染进程：

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('electronEnv', {
  shopifyStore: process.env.SHOPIFY_STORE,
  shopifyApiKey: process.env.SHOPIFY_API_KEY,
  shopifyApiSecret: process.env.SHOPIFY_API_SECRET
})

3. 在渲染进程中通过全局变量访问：

console.log(window.electronEnv.shopifyStore)

场景二：结合Create React App（CRA）的情况 #

CRA默认支持.env文件，但要求变量以REACT_APP_为前缀，所以修改.env内容：

REACT_APP_SHOPIFY_STORE=example.com
REACT_APP_SHOPIFY_API_KEY=<key>
REACT_APP_SHOPIFY_API_SECRET=<secret key>

之后在React组件中直接通过process.env.REACT_APP_SHOPIFY_STORE访问即可，CRA会自动处理变量注入。若主进程也需要访问这些变量，仍需在主进程入口加载dotenv。

4. 注意事项 #

• .env文件需放在项目根目录（与package.json同级）
• 将.env添加到.gitignore，避免敏感信息泄露
• 多环境场景下，可创建.env.development、.env.production等文件，dotenv会根据NODE_ENV自动加载对应文件，也可通过require('dotenv').config({ path: '.env.development' })指定加载路径

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