NSIS打包electron生成的文件为exe安装包

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_33196814/article/details/91651298

作者:lizhonglin
github: https://github.com/Leezhonglin/
blog: https://leezhonglin.github.io/

接着上一篇文章最后的的内容开始。上面我们使用electron生成相应的项目文件包,只是一个绿色版本的应用,不一定是我们最喜欢的。懂软件的人使用起来还是比较简单。有一个需求是我们能不能打包成像qq微信这样下载下来可以自己安装,并且能选择自己喜欢的安装目录呢? 答案肯定是可以的。接下来我们就开始我们的编译打包。

一、需要的工具
  1. NSIS软件

    下载地址:https://pan.baidu.com/s/1mitSQU0
    
  2. asar插件

    可以参考官方文档 地址

安装NSIS就直接下一步下一步就ok.

安装asar的命令为:

npm install -g asar

PS C:\Users\lzl\Desktop\test> npm install -g asar
C:\Users\lzl\AppData\Roaming\npm\asar -> C:\Users\lzl\AppData\Roaming\npm\node_modules\asar\bin\asar.js
[email protected]
updated 1 package in 12.708s
PS C:\Users\lzl\Desktop\test>

二、打包

运行命令

asar pack ./index.html app.asar

PS C:\Users\lj\Desktop\test> asar pack ./index.html app.asar
PS C:\Users\lj\Desktop\test>

然后将生成的app.asar 的文件拷贝到项目文件的test\app\resources文件夹下面
在这里插入图片描述

三、打开NSIS软件进行操作

选择HW VNISEdit选项。
在这里插入图片描述
来到如下界面
在这里插入图片描述
选择文件----》新建脚本向导
在这里插入图片描述
在这里插入图片描述
直接点击下一步。填写下面的信息
在这里插入图片描述
填写好上面的信息后点击下一步。来选择安装程序的图标、安装程序文件名称、安装程序语言、用户图形界面、压缩算法等信息。
我添加了一个ico图标
在这里插入图片描述

在这里插入图片描述
其他设置选择了简体中文。然后在点击下一步。这一步默认处理
在这里插入图片描述
然后在点击下一步,授权文件有就填,没有就填空白。
在这里插入图片描述
然后在点击下一步,添加应用程序文件,默认两个文件选中,删除
在这里插入图片描述
删除完默认的文件之后在点击添加按钮添加我们自己的文件
在这里插入图片描述
选择自己已经编译好的muise.exe文件
在这里插入图片描述
选好之后在点击确认。然后回到这个界面在点击添加目录按钮来添加整个要打包的目录。
在这里插入图片描述
添加好打包的目录和他的子目录
在这里插入图片描述
然后在点击确定,在回到当前页面
在这里插入图片描述
在点击下一步进入应用程序图标的设置,这个地方可以根据自己的情况选择
在这里插入图片描述
选择好之后在点击下一步。设置安装程序之后运行,默认就是我们打包后的启动程序
在这里插入图片描述
在点击下一步,进入解除安装程序设置。我这里选择的默认
在这里插入图片描述
点击下一步完成向导
在这里插入图片描述
点击完成按钮,保存向导设置的nsi文件,位置自己指定。
在这里插入图片描述
保存完成后就来在最初的主页面,就能看见我们刚才配置的信息。
在这里插入图片描述
到了这一步了我们就可以开始编译了。点击有上面的编译并运行。
在这里插入图片描述
等待程序编译结果。
在这里插入图片描述
到了这一步我们的程序已经打包成功。点击下图是我们打包成功的效果图
在这里插入图片描述
双击程序就可以开始安装
在这里插入图片描述
原创出品,欢迎转载收藏。

猜你喜欢

转载自blog.csdn.net/qq_33196814/article/details/91651298