Electron使用electron-updater自动更新

明知山

发布于 2021-12-28 11:37:11

4K2

发布于 2021-12-28 11:37:11

文章被收录于专栏：前端开发随笔

安装electron-log是为了方便本地调试

yarn add electron-updater
yarn add electron-log

版本号是根据你的package.json

vue.config.js写入

publish: [
	{
		provider: 'generic',
		url: 'http://update.xxx.com'
	}
],

打包的时候需要将生成的exe文件和latest.yml放到服务器中

在项目的根目录新建dev-app-update.yml文件这个文件是为了方便进行本地调试

provider: generic
url: 'http://update.xxx.com'

新建一个updater.js，对更新文件进行单独封装与background.js同级

import { autoUpdater } from "electron-updater"
const { dialog, BrowserWindow } = require('electron')

const log = require("electron-log")
autoUpdater.logger = log
autoUpdater.logger.transports.file.level = "info"

const path = require('path')

const isDevelopment = process.env.NODE_ENV === 'development'

// 防止报错no such file or directory dev-app-update.yml
if (isDevelopment) {
    autoUpdater.updateConfigPath = path.join(__dirname, '../dev-app-update.yml')
}

export default () => {
    let win = null

    //设置自动下载
    autoUpdater.autoDownload = false

    // 检测是否有新版本
    autoUpdater.checkForUpdates()

    autoUpdater.on('checking-for-update', res => {
        log.info("获取版本信息:" + res)
    })

    autoUpdater.on('update-not-available', res => {
        log.info("没有可更新版本:" + res)
    })

    autoUpdater.on('update-available', res => {
        dialog.showMessageBox({
            type: 'info',
            title: '软件更新',
            message: '发现新版本, 确定更新?',
            buttons: ['确定', '取消']
        }).then(resp => {
            if (resp.response == 0) {
                createWindow()
                autoUpdater.downloadUpdate()
            }
        })
    })

    async function createWindow() {
        win = new BrowserWindow({
            width: 300,
            height: 300,
            title: "七鹊",
            frame: false, 
            transparent: true,
            maximizable: false,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                enableRemoteModule: true
            },
        })
        if (process.env.WEBPACK_DEV_SERVER_URL) {
            await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/update')
        } else {
            win.loadURL('app://./index.html#/update')
        }
    }

    autoUpdater.on('download-progress', res => {
        log.info("下载监听:" + res)
        win.webContents.send('downloadProgress', res)
    })

    autoUpdater.on('update-downloaded', () => {
        dialog.showMessageBox({
            title: '下载完成',
            message: '最新版本已下载完成, 退出程序进行安装'
        }).then(() => {
            autoUpdater.quitAndInstall()
        })
    })
}

将文件引入到background.js文件

import updater from "./updater"
app.on('ready', async () => {
  updater()
})

update.vue进行进度展示

<template>
    <div class="progress">
        <el-progress type="circle" :percentage="percentage" />
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { ipcRenderer } from 'electron'
const percentage = ref(0)

onMounted(() => {
    ipcRenderer.on('downloadProgress', (e, arg) => {
        percentage.value = parseInt(arg.percent)
    })
})

</script>
<style lang='less' scoped>
.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

electron-log打印日志可以在电脑硬盘中查看，下面是我的地址，可供参考 C:\Users\Administrator\AppData\Roaming\qique\logs

更新下载的安装地址 C:\Users\Administrator\AppData\Local\qique\pending

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/12/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript