将 create-react-app 与 electron-builder 一起使用

Question

我使用 create-react-app 创建了一个简单的应用程序，并对 package.json

进行了以下更改

{
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "start": "node scripts/start.js",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "preelectron-pack": "yarn build",
    "electron-pack": "electron-builder build -m",
    "build": "node scripts/build.js",
    "prettify": "prettier --write \"src/**/*.js\"",
    "precommit": "yarn prettify",
    "test": "node scripts/test.js --env=jsdom"
  }
}

public 文件夹中的 electron.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: 1364,
    height: 768,
    webPreferences: {
      webSecurity: false
    }
  })
  mainWindow.setMinimumSize(1364, 768)
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : url.format({
          pathname: path.join(__dirname, '../build/index.html'),
          protocol: 'file:',
          slashes: true
        })
  )
  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()
  }
})

在运行脚本electron-pack 时，它给了我这个错误： not allowed to load local resource file:///index.html

可能的问题是什么？

react-scripts 版本：1.1.5
电子生成器版本：20.28.2

Answer 1

我解决了。

问题在于react-router 的BrowserRouter。我不得不将其更改为 HashRouter，现在所有文件和路由都能正常加载。