我已经创建了一个React应用,并希望将其包裹在电子中以在win10上运行,因为该应用需要node-seriaport。 在开发模式下一切正常,但是在生产模式下(即打包时),我无法使应用正常运行。 该应用程序在错误的页面上启动,并且由于路由/路径不正确,无法正确加载多余资源中的图像和文件。
打包本身可以正常工作,但是当我运行.exe文件时,应用程序将在404路由上启动,我已经将它实现为react-router中的catch。在chrome控制台中登录时,应用程序实际要去的地方,我看到以下路线:
pathname: "/C:/UserData/somefolder/otherfolder/dist/win-unpacked/resources/app.asar/build/index.html"
-如果开头没有/
,这是正确的。
我在extraResource文件夹中有一些文件,但是我无法以生产/打包模式访问此文件夹,在Chrome的“源”选项卡中,extraResources文件夹不是主应用程序目录的一部分,而是单独显示,这意味着可以预期处于C:\
下,如何正确配置?
正如在开发人员模式中所说,一切正常。 我认为这一切都始于进入点的正确路线,有人能不能给我一个提示我要做什么才能正常工作?
这是我的package.json
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"main": "./public/electron.js",
"author": "CG",
"description": "description",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
"rebuild": "./node_modules/.bin/electron-rebuild -f -w serialport",
"electron-pack": "build --win --x64 --dir"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"electron": "^4.0.4",
"electron-packager": "^13.1.1",
"electron-rebuild": "^1.8.4"
},
"build": {
"appId": "com.wmt.wmt-1",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories":{
"buildResources": "public"
},
"extraResources": [
{
"from": "./public/extraResources/",
"to": "extraResources",
"filter": [
"**/*"
]
}
]
},
"win": {
"icon": "/public/img/icon.png"
},
"homepage": "./"
}
这是electron.js
文件:
const {app, BrowserWindow, protocol} = require('electron')
const path = require('path');
const url = require('url');
let mainWindow
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true,
});
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
webSecurity: false
}
});
mainWindow.loadURL(startUrl);
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
});