electron打包可选择安装位置，可自动更新配置

windows版：

1.：引包：electron,electron-builder，electron-updater**

yarn add electron -dev
yarn add electron-builder -dev
yarn add electron-updater -dev
yarn add is-electron  //用于判断
前两个我的默认就有

2.Package.json配置修改：

{
    "publish": [
        {
            "provider": "generic",
            "url": "http://localhost:8899/"   //放置安装包和latest.yml的服务器地址
        }
    ],
    "win": {    //windows下安装软件配置参数
        "icon": "build/icons/icon.ico",
        "target": [
            "nsis",  //打包为nsis安装文件
            "zip"   //打包为安装文件zip
        ]
    },
    "nsis": {   //nsis配置参数
        "oneClick": false,    // 是否一键安装
        "allowToChangeInstallationDirectory": true,    //允许用户选择安装位置
        "perMachine": true
    }
}；

3.在主进程main下面新建update.js

const { autoUpdater } = require('electron-updater')
const uploadUrl = 'http://localhost:8899/' // 安装包helatest.yml所在服务器地址
const { ipcMain } = require('electron') // ipcMain 主线程
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
export const updateHandle = (mainWindow) => {
    let message = {
        error: { status: -1, msg: '检测更新查询异常' },
        checking: { status: 0, msg: '正在检查更新...' },
        updateAva: { status: 1, msg: '检测到新版本' },
        updateNotAva: { status: 2, msg: '您现在使用的版本为最新版本,无需更新!' },
    }

    autoUpdater.setFeedURL(uploadUrl)
    //在下载之前将autoUpdater的autoDownload属性设置成false，通过渲染进程触发主进程事件来实现这一设置
    autoUpdater.autoDownload = false;
    // 检测更新查询异常
    autoUpdater.on('error', function (error) {
        sendUpdateMessage(mainWindow, message.error)
    })
    // 当开始检查更新的时候触发
    autoUpdater.on('checking-for-update', function () {
        sendUpdateMessage(mainWindow, message.checking)
    })
    // 当发现有可用更新的时候触发，更新包下载会自动开始
    autoUpdater.on('update-available', function (info) {
        // 主进程向renderer进程发送是否确认更新
        mainWindow.webContents.send('isUpdateNow', info)
        sendUpdateMessage(mainWindow, message.updateAva)
    })
    // 当发现版本为最新版本触发
    autoUpdater.on('update-not-available', function (info) {
        sendUpdateMessage(mainWindow, message.updateNotAva)
    })
    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        mainWindow.webContents.send('downloadProgress', progressObj)
    })
    // 包下载成功时触发
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        autoUpdater.quitAndInstall() // 包下载完成后，重启当前的应用并且安装更新
    })

    // 收到renderer进程确认更新
    ipcMain.on('updateNow', (e, arg) => {
        console.log('开始更新')
        autoUpdater.downloadUpdate();
    })

    ipcMain.on('checkForUpdate', () => {
        // 收到renderer进程的检查通知后，开始检查更新
        autoUpdater.checkForUpdates()
    })
}

// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(mainWindow, text) {
    mainWindow.webContents.send('message', text)
}

4.上面updateHandle可以看到有参数，在主进程main下面index.js中调用

import { updateHandle } from './update' //引入
function createWindow () {
  
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
  //调用update
  updateHandle(mainWindow)
}

5.在渲染进程中开始监听，我这里写在app.vue中

import isElectron from "is-electron";
let ipcRenderer = require("electron").ipcRenderer;

mounted() {
    let vm = this;
    if (isElectron()) {
      vm.ipcRenderer = ipcRenderer;
      vm.ipcRenderer.on("message", (event, data) => {
        console.log("message", data.msg);
      });
      vm.ipcRenderer.on("downloadProgress", (event, progressObj) => {
        console.log("downloadProgress", progressObj);
        vm.progressObj = progressObj
        // 可自定义下载渲染效果  比如下载进度
      });
      vm.ipcRenderer.on("isUpdateNow", (event, versionInfo) => {
        // 自定义选择效果，效果自行编写 tip是我在 latest.yml 中手动添加的更新内容提示
        // 用的element-ui 可自行安装
        vm.$confirm(
          versionInfo.tip+",是否立即升级？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then(() => {
            vm.ipcRenderer.send("updateNow");
          })
          .catch(() => {});
       
      });
      vm.checkForUpdate(); // electron应用启动后主动触发检查更新函数
    }
  },
  beforeDestroy() {
    // 移除ipcRenderer所有事件
    if (isElectron()) {
      this.ipcRenderer.removeAllListeners();
    }
  },
  methods: {
    checkForUpdate() {
      // 用来触发更新函数
      this.ipcRenderer.send("checkForUpdate");
    },
  },

6.这就大功告成，每次打开都会检测是否有更新，如果有则会有如下提示，确定便开始下载更新，下载完成自动安装