如何配置Electron应用实现本地开发、打包生产模式及对应环境变量读取

核心判定逻辑 #

直接使用Electron原生提供的app.isPackaged属性做模式区分，该属性从Electron 5版本开始就已稳定支持，完全适配当前使用的10.0.0版本，无额外兼容成本：

• 本地直接运行electron .启动开发环境时，app.isPackaged返回false，对应开发模式
• 经electron-builder 22.8.0打包后的应用运行时，app.isPackaged自动返回true，对应生产模式

环境变量配置实现 #

1. 主进程环境变量设置 #

在主进程入口文件（通常为main.js）中，加载app模块后直接将模式挂载到process.env，主进程所有模块可直接读取：

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

// 判定运行模式
const isDev = !app.isPackaged
// 挂载全局环境变量，主进程可直接读取 process.env.NODE_ENV 的值
process.env.NODE_ENV = isDev ? 'development' : 'production'

2. 渲染进程环境变量传递 #

默认渲染进程无法直接访问Node层的process对象，通过preload预加载脚本传递环境变量，适配Electron 10的安全配置规范，不需要开启高危的Node权限：

1. 窗口初始化时指定preload路径，关闭危险权限：

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // 以下配置适配Electron 10安全要求，避免渲染进程暴露Node权限
      nodeIntegration: false,
      contextIsolation: true
    }
  })

  // 开发模式自动打开开发者工具
  if (isDev) mainWindow.webContents.openDevTools()

  // 加载对应环境的页面资源
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000' // 本地开发的前端服务地址（替换为自身项目的Dev Server地址）
      : `file://${path.join(__dirname, '../dist/index.html')}` // 打包后的静态资源路径
  )
}

2. 新建preload.js文件，将环境变量挂载到渲染进程的window对象上：

window.env = {
  NODE_ENV: process.env.NODE_ENV
}

渲染进程中可直接通过window.env.NODE_ENV读取当前运行模式。

项目启动与打包配置 #

修改package.json的脚本配置，适配当前版本的工具链：

{
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "10.0.0",
    "electron-builder": "22.8.0"
  }
}

• 执行npm start即自动运行在开发模式
• 执行npm run build完成打包，生成的应用自动运行在生产模式

常见适配注意点 #

• 如果主进程使用Webpack等构建工具二次打包，需要配置Node选项关闭__dirname的字符串替换，否则打包后会出现路径读取错误：

  // webpack.config.js 示例配置
  module.exports = {
    node: {
      __dirname: false
    }
  }
  

• 不要依赖命令行启动参数（如--dev）判定模式，打包后的应用容易被用户误传参数导致模式判断错误，app.isPackaged是Electron原生提供的可靠判定依据
• electron-builder 22.8.0不需要额外添加打包配置，即可让打包后的应用自动设置app.isPackaged为true，完全兼容当前构建工具版本

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