版权声明: https://blog.csdn.net/GISuuser/article/details/88051253
使用Electron框架已经开发了一段时间了,想要将开发的结果打包运行一下。中间看了很多人的介绍,也错了很多次,最后终于成功了,希望写下来能帮助到其他的人。
目录结构
网上有的人介绍需要把package.json文件拷贝到app里一份,不用拷贝的。
打包命令
然后就是打包命令了,打包需要先安装electron-packager插件
cnpm install electron-packager --save-dev
然后打包命令是
electron-packager ./ test3 --arch=x64 --out ./OutApp --overwrite --icon=./app/icon/eart.ico --electron-version=4.0.2 --download.mirror=https://npm.taobao.org/mirrors/electron/
网上的很多打包命令已经过时了,需要注意,electron-version需要与electron自己的版本对应。这个命令太长,可以将命令配置到package.json文件中,以后打包比较方便。后面会附上我的json文件。
结果
最后在OutApp中可以找到打包结果,点击其中的exe文件,就启动了如下图
注意事项
1.不要使用开发工具如idea的命令窗口运行打包命令,错误原因显示的不详细,而且等待时间太长
2.遇到找不到模块的错误,最好在安装一下模块依赖
扫描二维码关注公众号,回复:
5507908 查看本文章
3.electron和electron-prebuilt这些最好在devDependencies里
4.最好不要一次打所有平台的包,容易出错,速度也慢
{
"name": "electronl",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"scripts": {
"test": ".\\node_modules\\.bin\\electron .",
"start": "chcp 65001 && npm test",
"hot": ".\\node_modules\\.bin\\gulp watch:electron",
"packager": "electron-packager ./ test3 --arch=x64 --out ./OutApp --overwrite --icon=./app/icon/eart.ico --electron-version=4.0.2 --download.mirror=https://npm.taobao.org/mirrors/electron/"
},
"author": "hanbo",
"license": "ISC",
"dependencies": {
"electron-connect": "^0.6.3",
"gulp": "^4.0.0",
"gulp-util": "^3.0.8",
"jquery": "^3.3.1",
"mkdirp": "^0.5.1",
"proj4": "^2.5.0",
"request": "^2.88.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"electron-packager": "^13.1.0",
"electron": "^4.0.2",
"electron-prebuilt": "^1.4.13",
"gulp-babel": "^8.0.0"
}
}