【桌面应用程序】Vue-Electron 环境构建、打包与测试（Windows）

前言

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，就是超时。多尝试几次，基本就可以成功。

环境搭建好了就可以写业务逻辑了。

希望可以帮到你！