使用电子构建器构建后出现空白屏幕

Question

我将 React 应用程序转换为 Electron 应用程序，以便我可以将该应用程序作为可执行文件运行。我可以在开发中毫无问题地运行应用程序，但是当我使用电子构建器构建应用程序并尝试运行可执行文件时，所显示的只是空白屏幕。这是人们遇到的常见错误吗？如果是，我该如何解决？另外，我没有在我的react项目中使用react-router-dom，也没有做任何到其他页面的路由，它是一个单页面应用程序。

这是我在电子公共目录中的 main.js 文件 ` // main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    title: 'T.I.N.C.A.N.',
    frame: true,
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      worldSafeExecution: true,
      contextIsolation: true,
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  mainWindow.loadURL('http://localhost:3000')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.`

这是我的 package.json 文件

{
      "name": "chess",
      "version": "0.1.0",
      "private": true,
      "author": "Reece Cristea and Tim O'Shea",
      "description": "Chess AI Application",
      "main": "public/main.js",
      "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "concurrently": "^8.2.2",
        "cross-env": "^7.0.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "wait-on": "^7.2.0",
        "web-vitals": "^2.1.4",
        "yarn": "^1.22.22"
      },
      "devDependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "concurrently": "^8.2.2",
        "cross-env": "^7.0.3",
        "electron": "^30.0.1",
        "electron-builder": "^24.13.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "wait-on": "^7.2.0",
        "web-vitals": "^2.1.4",
        "yarn": "^1.22.22"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "electron-dev": "electron .",
        "electron:serve": "concurrently -k \"cross-env BROWSER=none yarn start \" \"yarn electron:start\" ",
        "electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",
        "electron:start": "wait-on http://127.0.0.1:3000 && electron ."
      },
      "build": {
        "extends": null,
        "appId": "com.tincan.app",
        "files": [
          "dist/**/*",
          "build/**/*",
          "node_modules/**/*",
          "package.json",
          "public/**/*"
        ],
        "directories": {
          "buildResources": "assets"
        },
        "win": {
          "target": "NSIS"
        },
        "mac": {
          "target": "dmg"
        },
        "linux": {
          "target": [
            "snap",
            "AppImage",
            "deb"
          ]
        }
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

Answer 1

如果您构建 React 应用程序，构建器将在“build”等目录中构建静态文件。 如果您在开发中运行它，它将在本地主机上启动一个服务器。

因此，如果您运行开发脚本，本地主机上的服务器将与您的 React 应用程序一起运行，并且您可以在 main.js 中调用它，如下所示：

mainWindow.loadURL('http://localhost:3000')

如果您构建电子应用程序，构建脚本将运行并在“build”文件夹下添加反应静态文件。这意味着，在您构建的电子应用程序的本地主机上没有正在运行的服务器，因此本地主机将不可调用。

此时必须调用构建好的静态文件：

const startURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(startURL)

在这里你会找到一个很好的入门教程：Electron React 教程