用Electron-Builder打包VUE项目(vue-cli-service)详解

1. 生成一个vue-demo(如果是要打包已有vue项目，这里跳过)

配置环境 安装最新版本 npm install -g @vue/cli 或 yarn global add @vue/cli 如果想卸载之前版本 npm uninstall vue-cli -g 或 yarn global remove vue-cli 查看版本 vue --version 或 vue -V 创建一个vue demo vue create demo 运行vue create demo命令后，我这里选择自动生成一个vue-demo，所有配置和文件自动生成。语言选择的vue3，完成后如二图所示，会提示进入项目目录，并使用npm run serve测试是否成功。这里自行测试，不放图了。

2. vue添加electron包

安装electron环境 Electron安装 npm install electron -g Vue项目添加Electron-builder打包工具 vue add electron-builder ps: 如果出现electron安装失败，或者后面使用electron-builder打包时，出现从github down包失败，请设置electron镜像。 设置镜像方法： npm config edit 使用该命令会弹出npm的配置文档，将以下类容复制到文件末尾。 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

3. 测试

npm run serve--网页
npm run electron:serve--客户端

客户端效果：

4. 打包

npm run electron:build

可能出现的错误如下，请按照第2点中的说明配置electron镜像，成功时如图2，实际情况如图3：

5. 附加1 替换客户端图标

上述的打包方式基本无法设置任何东西，包括重要的图标，版本信息等。查看了很多文档，大多是electron项目改图标的方式。特此记录electron打包vue项目改配置信息的方式。

进入项目路径，查看是否存在vue.config.js同名文件（好像是vue3没有，vue2会有），没有则创建一个空文件。 进入编辑类容如下，然后重新打包

如果想了解更多配置可参考electron-builder的配置：

6. 附加2 隐藏客户端默认菜单

这里网上没有找到相关的文档，但是查看demo文件后发现，程序的main是background.js，找到它打开编辑，里面是electron代码，直接修改，添加Menu引用，然后设置程序菜单为null，运行发现菜单已经没有了，重新打包即可。

最终就是一个有自己图标的无菜单客户端demo。