Electron打包React应用生成exe后白屏及语法错误问题求助

一、初始打包白屏原因 #

开发阶段通过parcel启动本地HTTP服务，Electron加载该服务地址；直接用electron-packager打包时，未先编译React代码为静态文件，Electron尝试加载未编译的源码，再加上BrowserRouter依赖HTML5 History API，本地文件路径无法匹配路由，最终导致白屏且无报错。

二、替换HashRouter后出现语法错误的原因 #

添加"homepage": "./"后，Parcel的构建路径逻辑被干扰，导致打包后的JS文件实际引用了HTML内容，浏览器解析时把HTML的<当成JS语法，因此抛出Uncaught SyntaxError: Unexpected token '<'错误。Parcel并不依赖homepage字段，该配置是Create React App的专用配置，不适用于Parcel环境。

三、分步解决方法 #

1. 配置React项目构建命令 #

在package.json的scripts中添加构建命令，确保Parcel正确编译静态文件：

"scripts": {
  "dev": "concurrently  \"cross-env BROWSER=none PORT=3000 parcel\" \"wait-on http://localhost:3000 && electron .\"",
  "build": "cross-env BROWSER=none parcel build src/index.html --public-url ./",
  "package": "electron-packager . MyApp2 --platform=win32 --arch=x64 --out=release-builds --asar"
}

• --public-url ./：指定静态资源的相对路径，确保打包后资源引用正确，替代无效的homepage配置。
• --asar：将Electron源码打包为asar格式，提升安全性和打包效率。

2. 修改Electron主进程加载逻辑 #

调整main.js，让Electron在生产环境加载打包后的静态文件，开发环境继续加载本地服务：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });

  // 根据环境切换加载地址
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, 'dist/index.html'));
  }
}

app.whenReady().then(createWindow);

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

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

3. 确认HashRouter配置 #

保持React路由使用HashRouter，适配本地文件路径的路由解析：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        {/* 你的业务路由配置 */}
      </Routes>
    </Router>
  );
}

4. 调整SQLite数据库路径 #

打包后数据库文件不能放在源码目录，需使用Electron提供的应用数据目录，避免路径错误：

const { app } = require('electron');
const path = require('path');
const sqlite3 = require('sqlite3').verbose();

// 获取系统默认的应用数据存储目录
const dbPath = path.join(app.getPath('userData'), 'your-db-name.db');
const db = new sqlite3.Database(dbPath, (err) => {
  if (err) console.error('数据库连接失败:', err.message);
});

5. 执行打包流程 #

1. 先编译React静态文件：

npm run build

2. 执行Electron打包：

npm run package

四、验证 #

打包完成后，进入release-builds/MyApp2-win32-x64目录，运行MyApp2.exe，通过Ctrl+Shift+I打开开发者工具，检查是否正常加载页面和数据，确认无报错。

内容的提问来源于stack exchange，提问作者Kaisama-x001