electron-vue实现自动更新功能

最新推荐文章于 2024-08-20 08:00:00 发布

wangle_style

最新推荐文章于 2024-08-20 08:00:00 发布

阅读量3k

点赞数 1

分类专栏： vue.js 文章标签： vue electron-vue electron自动更新

本文链接：https://blog.csdn.net/wangle_style/article/details/108680553

版权

vue.js 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

electron-vue项目很多时候需要自动更新的功能，避免每次发版都要单独发安装包的尴尬，下面介绍一下如何利用electron-updater来实现自动更新

一、首先是安装，安装方式很多，不多说，这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性

由于git上下来的electron-vue项目electron版本比较低为2x版本，所以对于版本比较高的electron-updater是不支持的，这里推荐使用3x到4x之间的electron-updater版本，当然也可以提升electron的版本来适配electron-updater，通过测试目前7x一下的electron版本是对electron-updater兼容比较好的，

这里选用的版本分别是：electron-updater----3.0.0、electron----7.3.3、electron-builder---20.19.2

好，版本选定后可以安装一下了，首先在package.json中"devDependencies"下添加"electron-updater": "^3.0.0",然后把electron的版本改为7.3.3既："electron": "^7.3.3","electron-builder": "^20.19.2",

实例如下：

"devDependencies": {
    "electron-updater": "^3.0.0",
    "electron": "^7.3.3",
    "electron-builder": "^20.19.2",
  }

之后要在package.json中的build添加publish字段，用来设置自动更新地址和生成yml文件，如下：

"publish": [
    {
      "provider": "generic",
      "url": "http://www.8888888.com/ceshi/" //这里指向存放的目录而非文件
    }
 ],

修改并保存后，进入文件夹，把node_modules依赖包手动删除或者命令行删除都可以，删除后重新npm i一下依赖包

二、OK炒菜需要的菜品已经齐全，下一步就开始炒菜

1.在src\renderer下创建一个文件夹untils并在改文件夹下创建一个Update.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) {
        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) => {
        //执行自动更新检查
        autoUpdater.checkForUpdates();
    })
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

这个文件是处理自动更新逻辑的，包括更新各个过程，建好后进入到主进程index.js中引入这个文件，并触发里面的函数，如下

import { app, BrowserWindow, Menu } from 'electron'
import {updateHandle} from '../renderer/utils/Update.js';

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow() {
  mainWindow = new BrowserWindow({
    useContentSize: true,
    minWidth: 930,
    minHeight: 565,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL(winURL) 
  let feedUrl = "http://www.88888888.com/ceshi/";
  //检测版本更新
  updateHandle(mainWindow,feedUrl);
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

上面只是简单例子，其他内容自行添加

之后就可以在rander进程中监听并触发自动更新了，在什么时候触发自行考量，这里举例为在app.vue中，如下

<template>
  <div id="app">
    <router-view></router-view>
    <el-dialog
      title="正在更新版本,请稍后 ···"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      center
    >
      <div style="width:100%;height:5vh;line-height:5vh;text-align:center">
        <el-progress
          status="success"
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :width="strokeWidth"
          :show-text="true"
        ></el-progress>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const { ipcRenderer } = require('electron')
let self = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
  // console.log(arg);
  if ("update-available" == arg.cmd) {
    //显示升级对话框
    self.dialogVisible = true;
  } else if ("download-progress" == arg.cmd) {
    // console.log(arg.message.percent);
    let percent = Math.round(parseFloat(arg.message.percent));
    self.percentage = percent;
  } else if ("error" == arg.cmd) {
    self.dialogVisible = false;
    self.$message(arg);
  } else if ("update-not-available" == arg.cmd) {
    // self.$message(arg);
  }
});
//开始检测新版本
let timeOut = window.setTimeout(() => {
  ipcRenderer.send("checkForUpdate");
  // console.log('开始检测更新触发')
}, 500);
clearTimeout;
export default {
  name: "globalquickseek",
  data() {
    return {
      dialogVisible: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      percentage: 0,
      strokeWidth:200
    };
  },
  mounted() {
    self = this;
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  }
};
</script>

<style>
/* CSS */
#app {
  height: 100%;
  overflow: hidden;
}
#app>div{
  overflow: hidden;
}
.tableList {
  widows: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.el-tooltip__popper{
  font-size: 14px;
  max-width: 300px !important;
  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;
  line-height: 20px;
}
</style>

ok，至此配置就已经结束了，下面就可以尝试自动升级了，先打包一个低版本的，既：package.json中version字段写为：0.0.1，打包完毕之后安装应用，安装完成之后再打包个高版本的，既：package.json中version字段写为：0.0.2，然后把打包后的高版本的.exe文件和yml文件上传至你上面配置的那个网址，传完之后打开刚才安装的.exe应用，感受自动升级的方便吧

备注：这里需要注意的是苹果版本需要上传的文件要多一些，把zip格式的也要传至服务器，另外，mac打包的时候需要代码签名才能更好的实现自动更新，否则在执行quitAndInstall方法时会跳出，具体代码签名我下一篇文章再写吧，这一篇有点长了