前言
Vue 与 Electron 环境构建、打包与测试。
目录
前言
一、基本环境准备
二、配置npm源
三、创建Vue项目
四、添加Electron支持
五、应用启动
六、添加UI框架 ElementUI
七、打包
一、基本环境准备
- npm版本：8.6.0
- node版本：v18.0.0
- Vue/cli版本：@vue/cli 5.0.8
- IDE：WebStorm
node环境与Vue环境安装略。
node直接去Node.js — Run JavaScript Everywhere下载即可。
全局安装vue使用以下命令。
npm install -g @vue/cli二、配置npm源
为避免下载过程中因网络问题导致失败，首先确认npm源。
npm config list
# 我的结果
disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_mirror = "https://mirrors.huaweicloud.com/electron/"
registry = "https://registry.npmmirror.com/"
如何设置
npm config set disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_mirror = "https://mirrors.huaweicloud.com/electron/"
npm config set registry = "https://registry.npmmirror.com/"以上地址测试与 2024年11月16日。当然也可以用taobao的electron源。
三、创建Vue项目
vue create utils-hub
我这里选择Vue2
Vue项目创建完成！
四、添加Electron支持
cd utils-hub
vue add electron-builder
五、应用启动
打开 WebStorm，打开项目
编辑运行/配置
配置Vue启动脚本
配置Electron启动脚本
逐个启动。
六、添加UI框架 ElementUI
npm install element-ui --save
全局引用ElementUI
禁用ESlint
测试ElementUI
七、打包
安装 electron-builder
npm install --save-dev electron-builder
编辑vue.config.js，添加以下内容
其中，icon需要指定为256x256大小的ico文件。nsis为安装版，portable为便携版。
开始打包
npm run electron:build
双击运行便携版的exe
可以应用页面显示正常，任务栏图标正常，唯独没有只有左上角icon。
添加窗口图标
验证。
其他主机运行。
至此，Vue + Electron环境搭建、打包与测试完成。
结语
折腾了几个小时，中途失败最多的就是下载包下载不了，不是404，就是超时。多尝试几次，基本就可以成功。
环境搭建好了就可以写业务逻辑了。
希望可以帮到你！
