我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…
前言
如何将vue项目web项目打包成客户端呢？今天就来说一下升级改造的过程以及遇到的坑。
1.项目情况
改造项目为vue2的web端项目，使用element-admin后台框架。
2.技术方案及环境配置要求
elelctron：elelctron-vue脚手架可以快速生成一个项目模板(使用命令vue init simulatedgreg/electron-vue my-project),如果是现有的vue项目可以直接安装electron-builder。
node环境，必须大于14，先决条件。 同时为了便于开发，必须在开发环境实时编译才算初步成功。
3.安装依赖
vue add electron-builder 这个必须要安装成功，但是在安装的时候又极易出现各种奇奇怪怪的问题，总结问题主要有两个，一个是node版本可能不对，另一个是网络问题。可以尝试切换npm路径为淘宝镜像，这里推荐路径管理工具nrm
npm i nrm
nrm ls查看所有路径
nrm use taobao切换路径
4.入口文件
安装完electron-builder,项目中会多出一个background.js文件，是electron-builder入口文件，可以配置高度，以及渲染文件的路径。
5.编译命令
安装完成后，page.json中会有运行、打包命令，我们再配置具体打包的平台命令
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"dist-win32": "electron-builder --win --ia32",
"dist-win64": "electron-builder --win --x64",
"dist-mac": "electron-builder --mac"
6.打包
执行
npm run dist-mac打包，打包成功后在dist_electron目录下会生成安装文件，如打包mac会生成dmg文件。
7.打包遇到的问题
（1）electron-v2.0.18-darwin-x64.zip这个包一般都下不下来,需要手动下载，下载文件后将文件放入对应路径，
在win的目录为 C:\Users ***** \AppData\Local\electron\Cache
在mac的目录为 ~/Library/Caches/electron/
淘宝镜像下载electron-v2.0.18-darwin-x64.zip文件地址为npm.taobao.org/mirrors/ele… 要将SHA这个text文件一起下载，下载地址
github.com/electron/el…
（2）打包遇到其他文件下载问题，参考资料
Mac 安装electron缓慢的3种解决方案blog.csdn.net/simplehouse…
Electron 打包问题：electron-builder 下载各种依赖出错blog.csdn.net/cctvcqupt/a…
electron入坑指南www.cnblogs.com/xueyoucd/p/…
electron淘宝镜像地址npm.taobao.org/mirrors/ele…
8.打包完成后
安装打包后文件，会发现有些网络问题需要修改。 主要为生产环境下请求地址问题，例如 BASE_URL = ‘api.wtr.ic.zx:30080' + process.env.VUE_APP_BASE_API 验证码问题也要补全请求地址
