Electron打包后无法加载index.html，白屏问题求助

核心问题排查与修复步骤 #

1. 修正Electron路径配置与语法错误 #

你的loadURL依赖__dirname的路径在electron-builder打包后会失效（asar包结构会改变__dirname指向），同时webPreferences配置存在笔误（多余的web后缀），需先修正：

// 顶部添加url模块引入
import url from 'url';

const createWidnow = () => {
  mainWindowFunctions();

  mainWindow = new BrowserWindow({
    minHeight: 600,
    minWidth: 800,
    x: appXAndY.x,
    y: appXAndY.y,
    width: appWidthAndHeight.width,
    height: appWidthAndHeight.height,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, "preload.js"),
      // 后续排查完成后建议恢复webSecurity: true，保障安全性
      webSecurity: false
    },
    autoHideMenuBar: true,
  });

  // 替换路径逻辑，使用app.getAppPath()获取可靠的应用根路径
  const loadPath = isDev 
    ? "http://localhost:3000/" 
    : url.format({
        pathname: path.join(app.getAppPath(), 'build', 'index.html'),
        protocol: 'file:',
        slashes: true
      });

  mainWindow.loadURL(loadPath);

  // 临时开启生产环境调试，排查白屏具体原因
  if (isDev || process.env.DEBUG_PROD) {
    mainWindow.webContents.openDevTools();
  }
}

2. 验证React打包资源与路由配置 #

• 确认package.json中homepage: "./"已正确设置，执行npm run build后，检查build/index.html内的静态资源引用（如static/js/main*.js、static/css/main*.css）是否以./开头，确保为相对路径。
• 确保已切换为HashRouter而非BrowserRouter，避免路由模式导致的资源加载失败：

  import { HashRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Routes>
          {/* 你的路由规则 */}
        </Routes>
      </Router>
    );
  }
  

3. 排查隐藏错误 #

• 通过临时开启生产环境开发者工具，查看控制台是否存在JS执行错误、资源404等信息，这些是白屏的常见诱因。
• 检查preload.js是否存在语法错误或路径错误，preload加载失败也可能导致白屏。

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