Electron打包后白屏，React组件不渲染怎么办？

a'ゞ素香提问于 2026-03-01 21:31:26 阅读 5

框架

我用Electron + React开发了一个小工具，本地开发时一切正常，但用electron-builder打包成exe后打开就是白屏，控制台也没报错。我试过把路由改成HashRouter，也检查了main.js里的loadURL路径，还是不行。

这是我的App组件代码：

import React from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

Electron 打包工具

我来解答赞 1 收藏

反馈

1 条解答

Dev · 志鲜 Lv1

白屏大概率是静态资源路径问题，打包后Electron找不到你的React构建产物。

先说解决方案。你需要检查两个地方。

第一，package.json里加一行homepage配置，让React打包时用相对路径：

"homepage": ".",

第二，main.js里加载页面的方式要改一下。开发环境用localhost，生产环境要用本地文件路径。可以优化成这样：

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

const path = require('path');

const isDev = process.env.NODE_ENV === 'development';



function createWindow() {

  const win = new BrowserWindow({

    width: 1200,

    height: 800,

    webPreferences: {

      nodeIntegration: true,

      contextIsolation: false

    }

  });



  if (isDev) {

    win.loadURL('http://localhost:3000');

    win.webContents.openDevTools();

  } else {

    // 打包后加载构建产物

    win.loadFile(path.join(__dirname, '../build/index.html'));

  }

}



app.whenReady().then(createWindow);

注意__dirname指向的是app目录（如果你用了electron-builder的默认配置），build文件夹在项目根目录，所以要../build。如果你的目录结构不一样，自己调整一下路径。

另外，确保你打包React项目时用的是npm run build，而且build文件夹确实被electron-builder正确打包进去了。可以在electron-builder.yml或者package.json里检查files配置：

"build": {

  "files": [

    "build/**/*",

    "node_modules/**/*",

    "main.js"

  ]

}

如果还是白屏，打开DevTools看看Console有没有报资源加载失败的错误，地址栏输入file://开头的路径，检查静态资源是不是404。

说实话，这个问题我踩过好几次坑，每次都是路径没配对。Electron打包后的路径体系和开发环境完全不一样，挺烦人的。

2026-03-01 22:06