【electron】vuecli + electron 的简单方式electron-builder

Posted 2023-05-17

参考技术A

安装成功后，运行npm run electron:serve，如果出现以下页面，说明成功了

// 执行下面的命令即可
npm run electron:build
//在dist_electron目录下会发现一个exe，双击这个exe会执行安装程序。
//还有一个win-unpacked文件夹，里面是我们之前打包的模式，点击里面的electron-vue-my.exe，即可运行

常规的配置基本上都在 background.js 中

准备windows和macOS两版图标。

修改vue.config.js，这里我就把修改的部分放出来：

打包APP

删除dist_electron文件夹，重新执行打包命令，npm run electron:build，会发现应用的图标变了
最终在dist_electron目录下生成build后的产品。

参考：
https://wangdaodao.com/20200707/vue-cli3-electron.html
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/
https://segmentfault.com/a/1190000021376934

Electron-vue环境配置

 

Vue CLI安装

参考：https://cli.vuejs.org/

npm install -g @vue/cli
# OR
yarn global add @vue/cli

参考：https://cli.vuejs.org/zh/guide/installation.html

旧版本处理：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。