React-Electron打包exe后直接运行显示空白窗口，如何修复？

问题根源 #

你的Electron主进程文件main.js硬编码了加载开发环境地址http://localhost:3000，打包成exe后没有本地开发服务器支撑，直接运行时无法获取页面资源，因此弹出空白窗口；而先启动localhost服务器再运行exe时，exe复用了开发服务器的资源，所以能正常显示。

解决方案 #

1. 修改主进程文件main.js

调整加载逻辑，区分开发/生产环境：开发时加载localhost，生产打包后加载本地build目录下的index.html文件。

修改后的main.js代码：

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

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'SieAPIAssure',
        webPreferences: {
            enableRemoteModule: true
        }
    });

    // 区分环境加载对应资源
    if (app.isPackaged) {
        // 生产环境：加载本地build后的index.html
        mainWindow.loadFile(path.join(__dirname, 'index.html'));
    } else {
        // 开发环境：加载localhost
        mainWindow.loadURL('http://localhost:3000');
        // 可选：打开开发者工具便于调试
        mainWindow.webContents.openDevTools();
    }
};

app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

2. 确认package.json配置正确性

• 确保build字段的files包含build/**/*和main.js，你的现有配置已满足：

  "build": {
      "npmRebuild": false,
      "appId": "com.sieapiassure.id",
      "files": [
        "build/**/*",
        "main.js"
      ],
      // 其他配置...
  }
  

• 确认homepage设置为"./"，该配置确保React打包后的资源路径为相对路径，适配Electron本地文件加载场景。

3. 重新打包测试

执行打包命令：

npm run electron:build

打包完成后直接运行生成的exe文件，即可正常显示页面。

额外说明 #

你的App组件使用HashRouter是正确选择——Electron加载本地文件时，BrowserRouter会存在路由路径解析问题，HashRouter基于URL哈希值处理路由，完美适配本地文件环境，无需修改。

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