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

短命女 2022-01-17 08:29 341阅读 0赞

> 作者：lizhonglin  
> **github:** [https://github.com/Leezhonglin/][https_github.com_Leezhonglin]  
> **blog:** [https://leezhonglin.github.io/][https_leezhonglin.github.io]

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

##### 一、需要的工具 #####

1.  NSIS软件
    
        下载地址：https://pan.baidu.com/s/1mitSQU0
2.  asar插件
    
    可以参考官方文档 [地址][Link 1]

安装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  
> asar@0.14.5  
> 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`文件夹下面  
![在这里插入图片描述][2019061222514913.png]

##### 三、打开NSIS软件进行操作 #####

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

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

[https_github.com_Leezhonglin]: https://github.com/Leezhonglin/
[https_leezhonglin.github.io]: https://leezhonglin.github.io/
[Link 1]: https://www.w3cschool.cn/electronmanual/cexo1qkn.html
[2019061222514913.png]: /images/20220117/98c3654a6f074d57a9217a96fc7891f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70]: /images/20220117/d9cdb88d710c45558b27dcd151fc4641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 1]: /images/20220117/3e70dba1201140fb8047be34849bbf7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 2]: /images/20220117/bd8f53111ed348c092a6422d47aa2ed6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 3]: /images/20220117/06b381fa8dae4609a59bbbc107f948b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 4]: /images/20220117/bfbc00a0bc2741b68edaaea91a873529.png
[20190612225627284.png]: /images/20220117/a7a6cfa0f00d4e239eb4228d75207037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 5]: /images/20220117/8bf597f3438d49a5b76e07cdbea7370b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 6]: /images/20220117/5b35f3568f6d450f8800acdcca36ebb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 7]: /images/20220117/f4ba56beb33d4450b6bd6d7f525cb06a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 8]: /images/20220117/422187748f4b492b9d5777ea6239c71a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 9]: /images/20220117/36f2d256f106453195c3242614c144b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 10]: /images/20220117/9eba4d7c0383471eb89d66e1f19d4d9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 11]: /images/20220117/fbbe24e4c7984113a9f90f800ba837ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 12]: /images/20220117/714fc5e9cf8546d087e0e004568df563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 13]: /images/20220117/e14ca77a6579442eb3b093aa133b9f20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 14]: /images/20220117/ce702807ad6f409ca9c995d556a56136.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 15]: /images/20220117/412d7c31ed0743878408540b5c8bd5c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 16]: /images/20220117/13d07dbb65ec4ddcbdae05e3bc9df488.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 17]: /images/20220117/26b7d915f2344b1db9f848024898d696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 18]: /images/20220117/600a0c28f9c1453693a1e8115cbbd978.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 19]: /images/20220117/316ac495f650417a9e9e157aab64e781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 20]: /images/20220117/9ef504c16f304809b5d49c105d5da2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 21]: /images/20220117/bd70433d800e4acca7a84507c5731dce.png
[2019061223044971.png]: /images/20220117/dd8312054a9a4705a72b6b65b8c90c2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMTk2ODE0_size_16_color_FFFFFF_t_70 22]: /images/20220117/879a4184cde347e2b5b14933299c3b51.png