electron - 将 create-react-app 与 electro-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 时，它给了我这个错误: 不允许加载本地资源file:///index.html

可能的问题是什么？

react-scripts版本:1.1.5
Electron 构建器版本:20.28.2

Answer 1

我解决了。

问题出在 react-router 的 BrowserRouter 上。我必须将其更改为 HashRouter，现在所有文件和路由都可以正确加载。