jenkins vue 打包特别慢_从零开始使用VUE开发桌面客户端

Electron 是一个非常强大的工具，它可以用来构建跨平台的桌面应用，编写一次到处运行。

知乎视频www.zhihu.com

0. 准备工作

安装好nodejs

在终端中输入 node -v 看到版本号即为成功

node -v
# 输出 v14.11.0

安装一个IDE，推荐使用vscode
安装cnpm 包管理工具，用来加速下载依赖

npm install -g cpm

安装vue-cli 管理工具

cnpm install -g @vue/cli

1. 新建一个vue项目

找一个空文件夹，执行以下命令，创建一个空文件，执行以下命令

vue create electrondemo

第三个electrondemo 为项目名称

按照提示，进入electrondemo文件夹，并运行起来

cd electrondemo
npm run serve

可以看到实例项目已经运行起来了

2. 安装electron-builder

electron-builder是一个开箱即用的构建跨平台electron桌面应用的解决方案

执行以下命令安装electron-builder

vue add electron-builder

安装成功后，可以看见package.json 中已经增加了几个命令

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","electron:build": "vue-cli-service electron:build","electron:serve": "vue-cli-service electron:serve","postinstall": "electron-builder install-app-deps","postuninstall": "electron-builder install-app-deps"},

这里将用到的两个命令是

npm run electron:serve
# 启动调试
npm run electron:build
# 生成项目

在命令行中输入

npm run electron:serve

耐心等待，成功后应用程序就运行起来了

自动配置中，会打开右侧的调试工具

运行以下命令将项目打包

npm run electron:build

如果在国内的话，可能会遇到下载依赖特别慢的问题

很多解决方案是通过手动下载 electron 到 cache 目录

其实只需要配置 electron 的下载源即可

在项目根目录新建 vue.config.js,并添加以下内容

//vue.config.js
module.exports = {pluginOptions: {electronBuilder: {builderOptions: {..."electronDownload": {"mirror": "https://npm.taobao.org/mirrors/electron/"}}}}
}

即配置electron的下载路径为https://npm.taobao.org/mirrors/electron/

配置之后

再次运行以下命令打包