Electron-vue 自动更新

安装electron-updater

yarn add electron-updater

package.json 中添加以下代码

 "publish": [
      {
        "provider": "generic",
        "url": "http://application.ziyoujike.cn/"
      }
    ],

如图

新建 updata.js

import { autoUpdater } from 'electron-updater'

import { ipcMain } from 'electron'
let mainWindow = null;
export function updateHandle(window, feedUrl) {
    mainWindow = window;
    let message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本，正在下载……',
        updateNotAva: '现在使用的就是最新版本，不用更新',
    };
    //设置更新包的地址
    autoUpdater.setFeedURL(feedUrl);
    //监听升级失败事件
    autoUpdater.on('error', function (error) {
        sendUpdateMessage({
            cmd: 'error',
            message: error
        })
    });
    //监听开始检测更新事件
    autoUpdater.on('checking-for-update', function (message) {
        sendUpdateMessage({
            cmd: 'checking-for-update',
            message: message
        })
    });
    //监听发现可用更新事件
    autoUpdater.on('update-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-available',
            message: message
        })
    });
    //监听没有可用更新事件
    autoUpdater.on('update-not-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-not-available',
            message: message
        })
    });

    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        console.log("更新下载进度事件")
        console.log(progressObj)
        console.log("更新下载进度事件")
        sendUpdateMessage({
            cmd: 'download-progress',
            message: progressObj
        })
    });
    //监听下载完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        //退出并安装更新包
        autoUpdater.quitAndInstall();
    });

    //接收渲染进程消息，开始检查更新
    ipcMain.on("checkForUpdate", (e, arg) => {
        //执行自动更新检查
        // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
        autoUpdater.checkForUpdates();
    })
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

src main文件中 index.js 中添加

import {updateHandle } from '../renderer/utils/updata.js'

let feedUrl = "http://application.ziyoujike.cn/";
  
updateHandle(mainWindow, feedUrl);

如图

src renderer文件夹中 App.vue 中 添加以下代码

<template>
  <a-spin :spinning="loading.spinning" :delay="20">
    <div id="app">
      <GkHeader></GkHeader>
      <router-view></router-view>
    </div>
    <a-modal
      v-model="visible"
      title="软件更新"
      :closable="false"
      :keyboard="false"
      :maskClosable="false"
      :centered="true"
      :footer="null"
    >
      <a-progress :percent="percent" />
    </a-modal>
  </a-spin>
</template>

<script>
let ipcRenderer = require("electron").ipcRenderer;
let _this = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
  if ("update-available" == arg.cmd) {
    //显示升级对话框
    _this.visible = true;
  } else if ("download-progress" == arg.cmd) {
    //更新升级进度
    let percent = Math.round(parseFloat(arg.message.percent));
    _this.percent = percent;
  } else if ("error" == arg.cmd) {
    _this.visible = false;
    _this.$message.error("更新失败");
  }
});
//20秒后开始检测新版本
let timeOut = window.setTimeout(() => {
  ipcRenderer.send("checkForUpdate");
}, 2000);
clearTimeout;
//间隔1小时检测一次
let interval = window.setInterval(() => {
  ipcRenderer.send("checkForUpdate");
}, 3600000);
import GkHeader from "./components/Gk-Header.vue";
import { mapState } from "vuex";
export default {
  name: "pxtk-application",
  components: {
    GkHeader,
  },
  data() {
    return {
      visible: false,
      percent: 0,
    };
  },
  computed: {
    ...mapState(["loading"]),
  },

  mounted() {
    _this = this;
    window.addEventListener("online", function () {
      this.$message.error("网络故障，请检查网络连接");
    });
    window.addEventListener("offline", function () {
      this.$message.success("网络已恢复");
    });
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  },
};
</script>

<style>
/* CSS */
.ant-notification {
  top: 80px !important;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>

如图

效果展示