NSIS 打包 Electron 生成exe安装包

每次文章都从0开始
从搭建开始 使用的是electron-vue 毕竟方便一点 如果只想安装electron 请参见我的另一个文章https://segmentfault.com/a/11...

开发目录: F:lee`
开发环境: windows10
IDE: phpstorm

安装electron

vue init simulatedgreg/electron-vue project3

cd project1
npm install //第一次安装的伙伴需要翻墙 如何翻墙请参加另一个文章(好像被和谐了 那就+我们的交流群 814270669 吧!)

编写一个页面

使用IDE打开随便编写一个页面

使用npm 构建安装包

npm run build

安装程序制作

下载NSIS软件，安装

下载地址:https://pan.baidu.com/s/1HrZz...

下载完毕打开 下一步 下一步 就行了 傻瓜式安装

NSIS新建脚本

点击软件左上角文件->选择新建脚本(向导)

到应用程序信息这里 填写的应用程序名称必须和你package.json里面配置的一样 否则你有自动更新的时候会安装一个另一个程序!

这里选择图标就行了

这里暂时默认就行了 后面出一个文章详细介绍这里

F:\lee\project3\build\win-unpacked\project3.exe
主程序就是 buildwin-unpacked的exe文件

选择 F:\lee\project3\build\win-unpacked

编译脚本

终于到了编译脚本了 如果按照上面的步骤执行 到这步会自动编译并且运行 如果没有自动编译点击顶部菜单栏的编译按钮

编译过程可能稍微有点长1-3分钟吧 编译完成之后会自动运行安装程序

友情提示

杀软报毒

electron做的软件会被某流氓杀软报毒 没办法解决 在这里给出一个解决办法
安装程序检测360是否运行 如果在运行就禁止安装
其中使用到一个dll插件 (FindProcDLL.dll)
官方下载地址:http://nsis.sourceforge.net/F...
作者提供的下载地址:https://pan.baidu.com/s/1EpJa...

下载完毕之后 放到NSIS目录下的 VNISEdit\Plugins 目录中
如果不知道目录 那就在桌面 右击VNISEdit 编译环境 选择打开所在目录 就可以看到了

在脚本最后加一句
编译完成后会后些方法:
一个是un.onInit ->卸载程序
一个是un.onUninstSuccess -> 卸载成功提示
.onInit 安装程序初始化

# 检测360杀毒软件是否在运行
Function .onInit
FindProcDLL::FindProc "360tray.exe"
   Pop $R0
   IntCmp $R0 1 0 no_run
   MessageBox MB_ICONSTOP "安装程序检测到360流氓软件正在运行，请退出程序后重试!"
   Quit
   no_run:
FunctionEnd

由于我电脑没有装360 所以我使用qq 来做演示

# 检测qq是否在运行
Function .onInit
FindProcDLL::FindProc "QQ.exe"
   Pop $R0
   IntCmp $R0 1 0 no_run
   MessageBox MB_ICONSTOP "安装程序检测到qq流氓软件正在运行，请退出程序后重试!"
   Quit
   no_run:
FunctionEnd

NSIS运行必须为管理员

请以管理员身份运行VNISEdit 编译环境 不然会终止编译并且有一个警告 好像是需要提级 什么什么的!