使用electron将vue项目打包成exe程序

一、下载electron

git clone https://github.com/electron/electron-quick-start

二、进入我们自己的项目，修改公共路径为相对路径(如果不修改，则在npm run build后出现白屏情况 。注：我由于首先就修改了路径，所以没有出现所谓的白屏情况，这里备注的目的是为了告知不修改可能产生的问题，因为很多人踩过坑)。

vue-cli3+版本的在vue.config.js中修改publicPath 将"/"修改为"./" ，如果是vue-cli2+版本项目则在index.js文件中的assetsPublicPath 路径修改"./"。

三、打包自己的项目，这个无需多言，将打包后生成的dist文件夹拷贝到clone下来的electron项目下。记得先删除electron项目自带的index.html文件。

 

四、找到入口文件 main.js ，修改打包的文件路径为我们的index.html：

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html') 

五、安装依赖库，运行下列指令即可进行打包效果预览，但是会遇到下载electron-vx.x.x-win32-x64.zip文件无法下载或者下载速度慢的问题，所以需要修改配置。

npm config edit

在弹出的文件中增加一行内容 electron_mirror=https://npm.taobao.org/mirrors/electron/

然后再执行

npm install

然后使用npm run start 预览效果。

六、安装打包依赖

npm install electron-packager --save-dev

七、进入 electron项目的package.json ，在 scripts 中添加 packager 指令，如下所示：

"packager": "electron-packager ./ App --platform=win32 --arch=x64 --electron-version=3.0.0 --overwrite"

网上很多资料的version=2.0.0，这样打的exe包运行会报错，需要修改为3.0.0。

八、如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容为，icon的路径自己调整下哦，更多配置内容请查阅文档哈

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --electron-version=2.0.0 --icon=./dist/favicon.ico --overwrite" 

九、打包

npm run packager

 命令执行后会生成一个文件夹App-win32-x64，里面找到App.exe执行即可。

十、将桌面应用文件夹封装成EXE安装包，有很多方法可以达到我们的目的，我在这里选择 Inno Setup 作为封装工具。

Inno Setup参考资料。https://www.cnblogs.com/benpaodejiandan/p/7081011.html。

本文章属于流程操作的，所以我也是按照网上资料来的，本意并无抄袭，只是当作记录。再者其中也遇到其他问题，所以记录下来。

参考资料：

1、https://zhuanlan.zhihu.com/p/59765568

2、https://blog.youkuaiyun.com/dling8/article/details/105434000