vue项目打包桌面应用 exe程序 以及打包为安装程序exe

需求：

一个vue项目打包放在windows系统 以桌面应用程序的方式打开。

准备：

1.electron ----- 可以在当前vue项目中 直接通过npm 安装 或者去官网git一个demo

官方demo地址：https://github.com/electron/electron-quick-start

vue项目安装命令 

npm install electron --save-dev //安装electron
npm install electron-packager --save-dev // 安装打包exe工具

2.vue项目 ---- vue项目本身打包dist后 访问是不能出现问题的，也就是保证你打的包是正常的，不要类似icon 无法加载，以及空白页面等 这样打包exe后才不会出现大问题

3.Inno Setup ---- 对打包后的exe应用程序 进一步打包成为一个安装包，因为上面的打包的exe会包含有大量文件，不可能这样发给用户使用，用户使用只需要下载一个安装包，安装即可

官方地址https://jrsoftware.org/isdl.php 可以在官方下载

也可以在各大应用商店，360软件管家，腾讯管家等直接搜索下载安装

开始：

以下是按照在 electron 官方demo的基础上进行修改 ，毕竟不熟悉不敢在原vue项目操作 ，原vue项目操作的需要配置，可以自行百度一大把

1.Git clone https://github.com/electron/electron-quick-start

2.打开clone的项目 先安装 npm install 

3.运行demo   npm run start 不出意外会弹出下面的界面

demo的目录以及功能

main.js：如下图

标记1 是窗口的配置默认宽高，更多配置看官网options 

https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

标记2 是加载一个html文件，更多配置看官方文档 实例方法

https://www.electronjs.org/docs/api/browser-window#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95

4.安装打包插件 electron-packager

npm install electron-packager --save-dev 

5.修改package.json文件 添加如下命令，使其可以打包为exe

"package":"electron-packager . test --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

. ---- 当前目录下所有文件 

test ---- 打包后的exe名称

out --- 打包后输出文件地址

version ---- 版本号

6.打包exe

npm run package

打包后的目录 其中test.exe就是启动文件 直接点开看到效果 和npm run start 是一样的

7.demo打包已完成，接下来就是把我们自己的vue项目打包，先把vue项目打包产生dist文件 ，然后复制dist文件到demo中，把原有的index.html文件删除，效果如下图：

8.修改main.js

加载文件地址指向你的dist内的index.html

可以打开调式模式

修改窗口左上角图标

关闭菜单栏

main.js修改后start运行效果图如下

如果你的项目需要访问后端接口，在打包vue项目生成dist时不能使用 反向代理处理跨域，直接访问就行，否则的话会无法访问接口，如下图:

9.打包exe，再打包命令行 加入icon，这个icon是打包后exe文件前面的图标，如果没有也是默认图标

切记：--icon 要--out 之前，我试了多次都是是无效的，每次打包最好是换一个exe名称 可能会有缓存导致一些修改失败

打完完成后效果图

10.exe打包完成后，接下来生成安装程序包，下载安装inno setup，然后新建一个文件，步骤如下：

新建文件 

直接下一步

输入打包的APP名称 、版本号、剩下的两个根据自己情况随便填，然后下一步

直接下一步

第一个是选择 你刚才在demo内打包的exe文件

第二个是选择文件或者目录 是exe文件统计目录下的所有文件，选中整个目录

然后下一步

选择语言，下一步

选择安装包 输出目录 、安装包名称、安装包的桌面图标，下一步

直接finsh ，然后会让你选择保存安装包代码文件保存名称及地址

在Inno编辑器看到如下代码

默认选中安装时创建桌面快捷图标

这个必须是icon 图标 ，附带一个ico转换的工具http://www.favicon-icon-generator.com/favicon

在运行完成后会在 你设置的输出目录里看到一个exe文件

这个带图标的exe文件 就是安装包，点击直接安装

------------------整个打包过程完结-------------------