五.打包
如果你完成完成前几期的步骤后觉得好像和真正的桌面程序还差点意思啊!对了,就是没有点击的图标,不能直接打开应用.....这就尴尬了!!
接下来就告诉你如何打包-.-
- 安装 electron-packager:
PS：安装之前，先复制一份package.json文件到./app目录下，然后改下./app目录下package.json里 “main”: “app/main.js”的路径（去掉app/或者把main放到app下），不这样子的话，下面打包的时候有可能会报错，有的版本识别不了应用路径。
使用命令npm install --save-dev electron-packager
安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息
图2.png
- 正式打包:
首先在项目根目录下面的 package.json 里添加代码，
"packager": "electron-packager ./app HelloWorld --all --out ./xxApp --version 1.4.6 --overwrite --icon=./app/img/icon/icon.ico"
packager 和 HelloWorld 还有 xxApp 自己想咋起就咋起
version 1.4.6 版本号不要抄我的,写自己安装的版本...
overwrite --icon=./app/img/icon/icon.ico" 这是添加你那个应用的图标的
图标必须是icon的哦...
添加到哪啊???
添加到packager.json的....
<pre>
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron .",
"packager": "electron-packager ./app zyPC --all --out ./xxApp --version 1.4.6 --overwrite --icon=app/img/yty.ico"
}
</pre>
图1.png
然后，在使用命令npm run-script packager 看到了吗???
run的是 前面那个名字'packager 自己想咋起就咋起 ' 名字要对哦 ....
第一次打包有点慢,可能会出错,我也是趴了好多坑才走到这儿的....
粗错先看路径,再看代码有没有写错...然后再看环境有木有粗错....ico图标必须是正确的ico...不要随便改个文件名和类型就想混过去....
打包之后会在根目录下出现xxApp 的文件夹...里面有你想要的(linux win ..)....
打好的包.png
exe文件.png
图标也是自己设置的ico图片
至此就大功告成了!
文章记得分享哦~
一天一更
如有需要,请点个关注... --> web魔集
网友评论