使用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。
本文章属于流程操作的，所以我也是按照网上资料来的，本意并无抄袭，只是当作记录。再者其中也遇到其他问题，所以记录下来。
参考资料：