Electron打包后无法使用

Question

Electron打包后无法使用

项目使用 Electron、React 和 Tailwind CSS 构建

现在在开发环境下能够使用，使用npm run build:win构建后，打开是白屏，静态文件也没有任何加载

控制台也没任何报错

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Electron 打包后无法使用

你遇到的问题是 Electron 打包后无法使用，项目使用 Electron、React 和 Tailwind CSS 构建，在开发环境下能够使用，但是使用 npm run build:win 构建后，打开是白屏，静态文件无法使用。

可能的解决方案：

1. 检查 main 文件是否正确：确保 main 文件中正确地引入了 React 和其他依赖项。
2. 检查 index.html 文件是否正确：确保 index.html 文件中正确地引入了 React 和其他依赖项。
3. 检查 package.json 文件中的 build script：确保 build script 中正确地配置了 Electron 的打包选项。
4. 检查 Electron 的版本是否正确：确保 Electron 的版本正确，避免使用过期的版本。
5. 检查 Node.js 的版本是否正确：确保 Node.js 的版本正确，避免使用过期的版本。

核心代码：

// main.js
import { app, BrowserWindow } from 'electron';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL(`file://${__dirname}/index.html`);

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

// package.json
"scripts": {
  "build:win": "electron-builder build --win --x64"
}

如果你已经检查了这些问题，但是问题仍然存在，可以提供更多的信息和代码，我将尽力帮助你解决问题。