构建电子反应应用程序后出现空白页面

Question

我已经在这个应用程序中工作了几周，现在我正在尝试打包以进行分发。当我在开发中时它工作得很好，但在生产中我只得到一个空白页面。我一直在这里的每一篇文章中寻找解决方案，但我找不到。

这是我的package.json

{
    "name": "triviapp",
    "author": "trivify",
    "version": "1.0.0",
    "private": true,
    "main": "public/electron.js",
    "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "docxtemplater": "^3.31.6",
    "electron-is-dev": "^2.0.0",
    "jimp": "^0.16.2",
    "lodash": "^4.17.21",
    "mongoose": "^6.7.0",
    "nodejs-pptx": "^1.0.1",
    "pizzip": "^3.1.3",
    "ppt-template": "^1.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "translate": "^1.4.1",
    "web-vitals": "^2.1.4",
    "xlsx-template": "^1.3.2"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"set BROWSER=none&& npm start\" \"wait-on 
    http://localhost:3000 && electron .\"",
    "hotel-dev": "concurrently \"set BROWSER=none&& npm start\" \" electron .\"",
    "dist": "electron-builder"
},
"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"
    ]
},
"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "concurrently": "^7.5.0",
    "electron": "^21.2.0",
    "electron-builder": "^23.6.0",
    "wait-on": "^6.0.1"
},
"build": {
"appId": "com.trivify.triviapp",
"productName": "TriviApp",
"target": "NSIS",
"extends": null,
"nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false
    },
"directories": {
      "buildResources": "resources",
      "output": "release"
    }
}
}

这是我的电子.js

const electron = require('electron');
const app = electron.app;
const { BrowserWindow, ipcMain } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
const { generateTrivia, createFolderWithImgs } = require('../src/logic/func');
const { createDoc } = require('../src/logic/createDoc');
const { createPPT } = require('../src/logic/createPPT');
const { getPreguntas, getRascas, addQuestionToBD, getBaresIsla, newIslandInDB, getIslaCodes } 
= require('../src/logic/dbfuncs');
const { connectDB } = require('../src/db');
const {createRascas} = require('../src/logic/createRascas');
const { createTicketIsla } = require('../src/logic/createTicketsIsla');
const url = require('url');

connectDB();

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
    width: 1300,
    height: 900,
    center: true,
    useContentSize: true,
    minHeight: 600,
    minWidth: 1000,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      webSecurity: false
    }
});

mainWindow.loadURL(isDev ? 'http://localhost:3000' : url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));
if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    // mainWindow.webContents.openDevTools();
}
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

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


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

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HashRouter >
      <App />
    </HashRouter>
  </React.StrictMode>
);

和我的app.js

import './stylesheets/App.css';
import { Route, Routes } from "react-router-dom";
import Home from './views/Home';
import Trivial from './views/Trivial';
import DataBases from './views/Databases';
import Rascas from './views/Rascas';
import IslaMisterio from './views/IslaMisterio';
import Facturas from './views/Facturas';

function App() {
  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/trivial' element={<Trivial />} />
        <Route path='/pasapalabra' element={<Home />} />
        <Route path='/isla' element={<IslaMisterio />} />
        <Route path='/rasca' element={<Rascas />} />
        <Route path='/facturas' element={<Facturas />} />
        <Route path='/databases' element={<DataBases />} />
      </Routes>
    </div>
  );
}

export default App;

如果您知道为什么会发生这种情况，请帮忙！

Answer 1

使用 CRA，您需要将 homepage

 添加到您的 

package.json，否则您的应用程序将无法在生产中正常工作。对于 Electron 应用程序，您可以使用：

"homepage": "./" 如果您有路由，您还需要检查您是否使用的是

<HashRouter>

而不是 <BrowserRouter>。作为参考，这里有一个关于此的问题。

Answer 2

如果您的Electron版本小于v11.0.0，请尝试升级到v11.0.0。

此问题与

nodeIntegration: true

 问题相关。请参阅电子发行说明 v11.0.0 

https://releases. Electronjs.org/release/v11.0.0.

或者，您可以尝试在创建BrowserWindow时在

nodeIntegration: false

选项中设置

webPreferences