Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）

效果图：

背景：

项目本身是基于 electron-vue-admin 改造的，这其中就包含electron-vue 和 electron-builder模块

实现远程更新的具体步骤：

1、首先需要安装electron-updater 4.1.2版本的模块，之所以安装该版本，是因为我经过大量的测试发现，只有4.1.2的版本能和electron4.0.1的版本兼容使用

npm install electron-updater@4.1.2 -save-dev

2、然后安装通过以下命令卸载electron 1.7.5的版本

npm uninstall  electron 

然后在安装 electron 4.0.1的版本

npm install electron@4.0.1 -save-dev 

3、然后通过上述相同的方式，卸载掉electron-builder 19.19.0版本的模块

npm uninstall electron-builder 

然后再重新安装 electron-builder 20.19.2版本的模块

npm install  electron-builder@20.19.2 -save-dev

全部版本如下图所示：

4、 然后打开项目根目录下的package.json文件，在build对象中添加publish字段，用来设置自动更新地址和生成yml文件的，如下：

"publish": [
  {
    "provider": "generic",
    "url": "http://xxx.xxx.xxx/gx/"
  }
],

注意： 这里的的url对应的是升级包的所在目录的网络地址，不用指向具体的升级包文件。

gx文件夹下存放的是最新版本的应用程序和.yml文件，对应服务器的目录如下所示：

5、然后配件安装设置，代码如下：

"nsis": {
       "oneClick": false, // 是否一键安装
       "perMachine": false,//perMachine 可能会影响自动更新的安装权限问题（windows7不受影响）
       "allowElevation": true,// 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
       "allowToChangeInstallationDirectory": true,// 允许修改安装目录
       "installerIcon": "./build/icons/icon.ico",// 安装图标
       "uninstallerIcon": "./build/icons/icon.ico",//卸载图标
       "installerHeaderIcon": "./build/icons/icon.ico",// 安装时头部图标
       "createDesktopShortcut": true, // 创建桌面图标
       "createStartMenuShortcut": true,// 创建开始菜单图标
       "runAfterFinish": true,// 安装完成后是否运行项目
       "shortcutName": "client-ico",// 图标名称
       "include": "build/script/installer.nsh" // 自定义nsis脚本
     },

全部配置如下：

{
  "name": "electron-vue-admin",
  "version": "4.0.0",
  "author": "Pan <panfree23@gmail.com>",
  "description": "An electron-vue project",
  "license": "MIT",
  "main": "./dist/electron/main.js",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "npm run lint:fix"
  },
  "build": {
    "productName": "electron-vue-admin",
    "appId": "org.simulatedgreg.electron-vue",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxx.xxx.xxx/gx/"
      }
    ],
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./build/icons/icon.ico",
      "uninstallerIcon": "./build/icons/icon.ico",
      "installerHeaderIcon": "./build/icons/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "runAfterFinish": true,
      "shortcutName": "client-ico"
    },

    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "lin