项目架构是React + electron,能够直接使用普通的 react 项目,而后加上electron配置。electron 配置能够从项目https://github.com/electron/electron-quick-start.git
中获取。html
打包配置:react
- 首先在 package.json中添加打包工具依赖
"devDependencies": { "electron-packager": "^14.2.1" }
- 再添加以下配置
"homepage": "."
git
- 在package.json中的scripts添加以下打包命令
"package": "electron-packager . demo --platform=darwin --arch=x64 --out=/Users/test/build --electron-version=8.2.3 --overwrite"
注意事项:github
--platform 最好指定要打包的平台,不建议指定 allshell
--out 不用指定为 build,会出现打包以后没有 build 目录的问题,另外此处要使用绝对路径json
- 配置 main.js
好多博客中,贴出的加载应用的方式是,这样的windows
// 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html');
或者是使用了 path 拼接等等,均可能会找不到文件,或者报错以下架构
electron Not allowed to load local resource
使用以下方式便可:app
mainWindow.loadFile(`./build/index.html`)
另外,main.js 中若是有这个独立的方法,electron
app.on('activate', function () { log.info("activate"); // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } })
建议注释掉,这个地方有个 bug,在应用启动过程当中点击会报错,
Uncaught Exception: Error: Cannot create BrowserWindow before app is ready at createWindow (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:11:24) at App.<anonymous> (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:98:9) at App.emit (events.js:210:5)
我已经跟 electron 提了 issue,回复说会修复。
若是要使用这个方法,要放在app.whenReady()中。