1、准备好现有的vue开发的项目
2、安装nodejs
https://nodejs.org/en/download/ 选择合适的版本
3、安装vue-cli工具
sudo cnpm install -g @vue/cli
4、安装electron-builder
终端进入项目文件夹，执行vue add electron-builder，完成后可以看到在package.json中有增加了electron的相关指令，执行npm run electron:serve可以看到运行结果
5、安装electron-icon-builder
sudo cnpm install --save-dev electron-icon-builder
6、修改图标为自己准备好的xxx.png
在package.json中增加一条
"electron:generate-icons": "electron-icon-builder --input=./xxx.png --output=build --flatten"
然后执行npm run electron:generate-icons生成各种尺寸的图标
7、修改依赖下载地址
修改vue.config.js文件，下载依赖改为国内镜像
8、打包
npm run electron:build
参考：
https://zhuanlan.zhihu.com/p/253325474
https://www.imooc.com/article/301850
更新时间：2024-01-25
情况一：electron实际打包使用中会区分打包环境，mac打包dmg格式，win系统打包exe格式，且win系统按此流程打包后不显示桌面图标
情况二：本地运行正常，打包后不能正常访问网络环境，status=0
在background.js文件中createWindow方法下，webPreferences配置项中添加webSecurity: false
情况三：视频背景不加载
在background.js文件中
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true, stream: true } }
])
情况四：各种窗口设置相关内容
https://www.electronjs.org/zh/docs/latest/api/browser-window
