javascript - 电子分布构建显示空白页

Question

我现在正在开发一个Electron+React-JS应用程序，并且必须创建一个分发版本。问题是，在创建该构建并启动结果文件（在我们的例子中是编译的应用程序）之后，该应用程序向我显示了一个空白屏幕，而没有呈现任何./src文件夹的内容。Electron在开发模式下启动时一切正常。

作为参考，我将附上我的package.json、electronmain.js和 Reactindex.js和App.js文件的内容。

包.json

{
  ...
  "build": {
    "appId": ...,
    "mac": {
      "category": ...
    },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "main": "public/electron.js",
  "homepage": "./",
  "dependencies": {
    "@reach/router": "^1.2.1",
    "apexcharts": "^3.10.1",
    "apisauce": "^1.1.1",
    "cross-env": "^6.0.3",
    "electron-is-dev": "^1.1.0",
    "formik": "^2.0.4",
    "moment": "^2.24.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-loading-overlay": "^1.0.1",
    "react-notification-system": "^0.2.17",
    "react-pin-input": "^0.9.0",
    "react-redux": "^7.1.3",
    "react-scripts": "3.2.0",
    "react-table": "^6.10.3",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "reduxsauce": "^1.1.1",
    "seamless-immutable": "^7.1.4",
    "yup": "^0.27.0"
  },
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-postinstall": "electron-builder install-app-deps",
    "electron-start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "build-mw": "yarn react-build && electron-builder -mw"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.0.0",
    "electron": "^7.1.1",
    "electron-builder": "^22.1.0",
    "wait-on": "^3.3.0"
  }
}

电子 main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  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';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

反应 App.js

import React from 'react';
import './App.css';

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {persistStore} from 'redux-persist';
import {PersistGate} from 'redux-persist/integration/react';

import Navigation from './Navigation';
import {RootReducer} from './Redux/Root.Reducer';

const store = createStore(RootReducer);
const persistor = persistStore(store);

function App() {
  return (
    <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Navigation />
    </PersistGate>
  </Provider>
  );
}

export default App;

PS 与在 Internet 上找到的有关将 Electron 与 React-JS 链接的教程相反，我已将 Electron 的 main.js 文件放在./public我的 React 项目中的目录下。

标签： javascriptreactjselectrondesktop-application