1.安装 electron-packager
注意:先复制一份package.json
文件到./app目录下,(千万记住这一点,我在这步这折腾了好几个小时才弄明白)然后记得改下package.json
里main:main.js
的路径(去掉app/
)
使用命令 npm install --save-dev electron-packager
将electron-package
安装到本地
安装完成后,
package.json
中会多出一条electron-package
的版本号配置信息
"devDependencies": {
"electron-packager": "^6.0.0",
"electron-prebuilt": "^0.37.3",
"gulp": "^3.9.1"
}
electron-packager
的打包基本命令是:
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optionaloptions>
命令有点长,每次要是都用这个命令来打包得蛋疼死,所以我们改进一下:
·在package.json
中添加脚本
"scripts": {
"start": "electron .",
"packager": "electron-packager ./app mclans --all --out ./OutApp --version 0.37.3 --overwrite --icon=./app/img/icon/icon.ico"
}
注意:我的命令行里的icon
文件路径
在命令行里运行:
npm run-script packager
这样就会启动electron-packager
来进行打包命令了,第一次打包要下载相关文件,一定要翻墙,下载时常根据网络状况而定。
打完包以后 会在./OutApp
下生成对应平台的包
运行包下的.exe文件 就可以看到我们的应用了
2.加密资源
可以看到,在每个包下的resources
文件夹里的app
文件夹 就是我们写的程序,这样我们的代码就是暴露在用户电脑上的,这非常的不安全,还好electron 自带了加密功能。
安装 asar
:npm install --save-dev asar
安装完成以后,就可以使用asar命令讲程序文件打包了,
asar pack ./app app.asar
执行完毕以后,在
./
下可以看到app.asar
文件,把他复制到./OutApp/mclans.../resources/
下,然后把resources
下的app
文件夹删除,运行resources
上层的appName.exe
文件可以启动应用了。
3.使用nsis制作安装程序
下载安装nsis(自己百度去)
启动nsis,选择新建脚本:向导
程序应用信息
第一步:程序基本信息,根据自己实际情况填写就行;
第二步:安装程序图标,自己选择。安装程序文件就是要输出的.exe文件,随便放。安装程序语言根据自己实际需要选择;
第三步闪屏和背景属性:根据自己实际情况选择;
第四步目录授权:根据自己实际情况选择;
第五步选择文件:选择我们输出的文件的目录;
第六步创建快捷图标:根据自己实际情况选择;
第七步指定安装完成后的动作:基本就是启动本程序即可;
第八步卸载相关属性:根据自己实际情况选择;
完成!!
完成之后摁F9
或者选择NSIS->编译并运行
编译并运行
运行完毕之后
即可在应用跟目录下看到我们的安装文件