Electron打包应用启动后显示白屏无报错问题求助

1. 检查主进程（electron.js）的资源加载路径 #

开发模式下通常加载本地开发服务器地址（比如http://localhost:3000），但生产模式需要加载打包后的React静态文件。确保你的electron.js中有区分环境的逻辑：

const isDev = require('electron-is-dev');
const path = require('path');

// 主窗口加载逻辑
mainWindow.loadURL(
  isDev
    ? 'http://localhost:3000'
    : `file://${path.join(__dirname, '../build/index.html')}`
);

注意：__dirname的位置取决于你的文件结构，如果electron.js放在项目根目录，打包后可能需要调整路径（比如../build还是./build），可以通过打印path.join(__dirname, '../build/index.html')确认实际路径是否正确。

2. 验证React打包产物的路径配置 #

在React项目的package.json中，确保homepage配置正确：

"homepage": "./"

这个配置会让React打包时生成相对路径的资源引用，避免Electron加载时找不到静态文件。

3. 检查Electron打包配置（package.json中的build字段） #

确保build配置包含正确的文件范围，比如：

"build": {
  "appId": "com.your.app.id",
  "files": [
    "build/**/*",
    "electron.js",
    "node_modules/**/*"
  ],
  "directories": {
    "buildResources": "assets"
  }
}

如果开启了asar打包（默认开启），可以尝试临时关闭asar验证是否是asar打包导致的资源无法访问：

"build": {
  "asar": false
}

4. 验证打包后的产物结构 #

打包后检查生成的应用包内的文件结构，确认：

• build文件夹存在，且包含index.html、static等静态资源
• electron.js的位置与你代码中引用的路径匹配

5. 生产模式下强制开启开发者工具调试 #

即使你认为无报错，也可以强制在生产模式打开开发者工具，查看Console和Network面板的详细信息：

// 在electron.js的主窗口创建后添加
mainWindow.webContents.openDevTools();

重点查看Network面板中是否有资源加载失败（404），这通常是路径错误的直接表现。

6. 匹配开发与打包后的资源结构 #

对比开发模式和打包后Sources中的内容，如果打包后缺少React的编译产物，说明Electron打包时没有正确包含React的build文件夹，需要调整package.json的build.files配置，确保build/**/*被包含在内。

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