内置电子和反应应用程序中的空白屏幕（因为找不到文件）

Question

我使用 Electron 和 React 完成了应用程序的开发。我需要使用 electron-builder 构建一个可执行文件。当我打开 .exe 时，它会抛出一个空白屏幕，并在控制台中出现这些错误：

我读了很多书，意识到人们建议使用

HashRouter

代替

BrowserRouter

，我做到了，但仍然不起作用。

这是我的反应路由

index.js

：

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import { Home, Package } from './pages';
import { NavBar } from './shared/components';
import './index.scss';

function App() {
  return (
    <Fragment>
      <Provider store={store}>
        <NavBar/>
        <HashRouter>
          <Switch>
            <Route path="/" component={Home} exact/>
            <Route path="/package" component={Package} exact/>
          </Switch>
        </HashRouter>
      </Provider>
      <p id="my-creds">by @gianlop3z</p>
    </Fragment>
  );
};

ReactDOM.render(<App/>, document.getElementById('root'));

还有我的

electron.js

：

const { default: devtools, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

function createWindow() {
  let win = new BrowserWindow({
    width: 950, height: 700,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });
  win.loadURL(
    isDev ?
      'http://localhost:3000' :
      `file://${path.join(__dirname, '../build/index.html')}`);
};

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

app.on('ready', () => {
  createWindow();
  devtools([REACT_DEVELOPER_TOOLS,  REDUX_DEVTOOLS])
    .then(name => console.log(`DevTools was added: ${name}!`))
    .catch(e => console.error(e));
});

Answer 1

我想我会在这里添加答案，否则人们会错过解决方案。

将

"homepage": "./"

添加到您的

package.json

将解决问题。

如果您无法添加它，因为您正在使用 React for Web（或其他），您可以将

-c.extraMetadata.homepage=./

添加到您的

electron builder

命令中。

例如：

electron-builder build -c.extraMetadata.main=electron/main.ts -c.extraMetadata.homepage=./ -c.extraMetadata.version=1.0.0 --publish never -mw