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可以看到运行结果

package.json

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文件，下载依赖改为国内镜像

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