手把手教你electron-builder创建桌面应用

一、vueCli创建一个项目

projectName是你的项目与名字

vue create projectName

二、全局配置electron的镜像源

因为electron相关的东西是外网下载，所以要配置镜像源，否则下载和打包都很慢

2.1. 方法一：命令配置

• 分别执行如下两个命令

// 配置electron的镜像源
npm config set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
// 配置electron打包的镜像源
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

2.2. 方法二：直接修改全局.npmrc 文件

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

优先级： 项目下 .npmrc > 全局 .npmrc > 环境变量

2.3. 重新打开一个cmd命令窗口

注意，保存之后，要重新打开一个命令行窗体，这些全局变量才会生效！马上体验一下刷刷下载的感觉吧~

三、为Vue项目安装electron-builder插件

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

• 进入项目根路径输入cmd回车
  

• 输入以下命令安装

vue add electron-builder

• 选择版本
  
• 开始下载
  由于我们安装了electron的淘宝镜像，下载速度非常快
• 如下提示安装成功
  

四、项目启动以及打包

• 在package.json我们可以看到如下代码
  3、4两条命令分别用于我们electron的打包和运行

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "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"
  },

• 解决electron启动慢的问题

在src文件夹下面，找到background.js文件，删除如下代码

• 成功
  

• 打包也是非常快