使用electron-builder打包Electron应用后出现空白屏问题求助

这是Electron打包React应用时的常见问题，核心原因是生产环境下仍然尝试加载开发服务器地址，而非本地静态文件。以下是具体修复步骤：

1. 修正主进程文件（main.js）加载逻辑 #

你的main.js中硬编码了加载http://localhost:3000，这只在开发环境有效。打包后的应用没有开发服务器，需要加载React构建后的本地index.html文件。修改createWindow函数：

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    title: 'T.I.N.C.A.N.',
    frame: true,
    width: 800,
    height: 600,
    webPreferences: {
      // 安全建议：contextIsolation开启时，nodeIntegration保持默认false即可
      contextIsolation: true,
      worldSafeExecution: true
    }
  })

  // 根据环境加载不同资源
  if (app.isPackaged) {
    // 生产环境：加载build文件夹下的index.html（main.js已复制到build目录）
    mainWindow.loadFile(path.join(__dirname, 'index.html'))
  } else {
    // 开发环境：加载本地开发服务器
    mainWindow.loadURL('http://localhost:3000')
    // 可打开开发者工具调试
    mainWindow.webContents.openDevTools()
  }
}

2. 完善package.json的构建脚本和配置 #

2.1 添加主进程文件复制步骤 #

React的build命令不会自动复制public/main.js到构建目录，需要在打包Electron前手动复制。修改electron:build脚本：

Mac/Linux用户：

"electron:build": "yarn build && cp public/main.js build/main.js && electron-builder -c.extraMetadata.main=build/main.js"

Windows用户：

"electron:build": "yarn build && copy public\\main.js build\\main.js && electron-builder -c.extraMetadata.main=build/main.js"

跨平台方案（需先安装copyfiles：yarn add copyfiles --dev）：

"electron:build": "yarn build && copyfiles public/main.js build && electron-builder -c.extraMetadata.main=build/main.js"

2.2 优化build配置 #

移除不必要的dist/**/*（React项目默认无此目录），保留核心文件配置：

"files": [
  "build/**/*",
  "node_modules/**/*",
  "package.json"
]

3. 测试验证 #

1. 先运行yarn build生成React生产构建文件
2. 运行electron .模拟生产环境加载（此时不会启动开发服务器），确认窗口能正常显示内容
3. 最后运行yarn electron:build打包，生成可执行文件后测试

额外注意事项 #

• 不要同时开启nodeIntegration: true和contextIsolation: true，这会带来安全风险且可能引发未知问题
• 若打包后仍有问题，可临时在生产环境开启开发者工具（mainWindow.webContents.openDevTools()），通过控制台错误信息定位问题

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