1. 添加依赖
"electron-updater": "^4.0.0"
升级的时候往往就是因为electron-updater版本不搭配,导致一些乱七八糟的问题出现,此时electron的版本是2.0.4,打包的时候如果electron-updater的版本小于4.0.0,会出现无法打包,所以修改electron-updater的版本为^4.0.0
2 配置更新程序的地址
打开package.json文件在build标签下添加public配置,执行npm run build时,将会在build目录中生成latest.yml文件
这里的的url对应的是升级包的所在目录的网络地址,不用指向具体的升级包文件。
以下放一张服务器所在的升级包的目录图片,做过后台开发的小伙伴一看就懂了。
举例:
“publish”: [
{ “provider”: “generic”,
“url”: “http://119.30.229.43/app/version/p/“
}
]
url地址指向的是升级包所在目录,升级包的文件名称和yml的文件名称没有限制,可以随意命名。
3 主进程中配置升级
新建一个checkupdate.ts文件,或者自己建立JS文件 内容如下
import { autoUpdater } from 'electron-updater' import { ipcMain, BrowserWindow } from 'electron' /** * -1 检查更新失败 0 正在检查更新 1 检测到新版本,准备下载 2 未检测到新版本 3 下载中 4 下载完成 **/ // 负责向渲染进程发送信息 function MessagemainWindow: BrowserWindow, type: Number, data?: String) { const senddata = { state: type, msg: data || '' } mainWindow.webContents.send'UpdateMsg', senddata) } // 更新应用的方法 export default mainWindow: BrowserWindow) => { // 在下载之前将autoUpdater的autoDownload属性设置成false,通过渲染进程触发主进程事件来实现这一设置将自动更新设置成false) autoUpdater.autoDownload = false //设置版本更新地址,即将打包后的latest.yml文件和exe文件同时放在 //http://xxxx/test/version/对应的服务器目录下,该地址和package.json的publish中的url保持一致 // https://sm2.35dinghuo.com/download/ autoUpdater.setFeedURL'https://sm2.35dinghuo.com/download/') // 当更新发生错误的时候触发。 autoUpdater.on'error', err) => { if err.message.includes'sha512 checksum mismatch')) { MessagemainWindow, -1, 'sha512校验失败') } }) // 当开始检查更新的时候触发 autoUpdater.on'checking-for-update', event, arg) => { MessagemainWindow, 0) }) // 发现可更新数据时 autoUpdater.on'update-available', event, arg) => { MessagemainWindow, 1) }) // 没有可更新数据时 autoUpdater.on'update-not-available', event, arg) => { MessagemainWindow, 2) }) // 下载监听 autoUpdater.on'download-progress', progressObj) => { MessagemainWindow, 3, progressObj) }) // 下载完成 autoUpdater.on'update-downloaded', ) => { MessagemainWindow, 4) }) // 执行更新检查 ipcMain.handle'check-update', ) => { autoUpdater.checkForUpdates).catcherr => { console.log'网络连接问题', err) }) }) // 退出并安装 ipcMain.handle'confirm-update', ) => { autoUpdater.quitAndInstall) }) // 手动下载更新文件 ipcMain.handle'confirm-downloadUpdate', ) => { autoUpdater.downloadUpdate) }) }
4.在main/index.js主进程中进行导入:
import Update from './checkupdate'; // 引入上面的文件 //检测版本更新 UpdatemainWindow);
5.渲染进程显示更新进度
<template> <div class="systemExample width100 height100"> <main> <div class="right-side"> <div class="doc"> <div class="title alt">您可以点击的按钮测试功能</div> <el-button type="primary" round @click="CheckUpdate">检查更新, 不可用于开发环境</el-button> </div> </div> </main> <el-dialog title="下载进度" :visible.sync="dialogVisible" :show-close="true" :close-on-press-escape="false" :close-on-click-modal="false" center width="50%" top="45vh"> <div class="conten"> <el-progress :percentage="percentage" :color="colors" :status="progressStaus"></el-progress> </div> </el-dialog> </div> </template> <script> let ipcRenderer = require"electron").ipcRenderer; export default { name: "systemExample", data: ) => { percentage: 0, colors: [ { color: "#f56c6c", percentage: 20 }, { color: "#e6a23c", percentage: 40 }, { color: "#6f7ad3", percentage: 60 }, { color: "#1989fa", percentage: 80 }, { color: "#5cb87a", percentage: 100 } ], dialogVisible: false, progressStaus: null, }), mounted ) { ipcRenderer.on'UpdateMsg', event, arg) => { switch arg.state) { case 1: this.$confirm'检查到商盟订货有新版本,是否更新?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then) => { this.dialogVisible = true this.$ipcApi.send"confirm-downloadUpdate") }) break; case 3: this.percentage = arg.msg.percent.toFixed1); break; case 4: this.progressStaus = "success"; this.$alert"下载完成!", "提示", { confirmButtonText: "确定", callback: action) => { this.$ipcApi.send"confirm-update"); }, }); break; default: break; } }) }, methods: {
// 下面方法点击按钮去检查,那么如果你想实现应用打开就去检查呢,你就吧此文件写在你项目的根页面,然后然后开始就去执行这个方法即可! CheckUpdate) {this.$ipcApi.send"check-update")}, } }; </script>
6. 最后上效果图:
6.5:默认下载成功后:下载的exe文件在这个位置: C:UsersAdministratorAppDataLocalelectron-vue-seed-updaterpending
7. 注意点:不可用于本地环境去检查更新,一定是打包后的exe文件运行:不然会报错,大概就是他会把electron的版本进行比较!
Update for version 10.1.3 is not available latest version: 2.0.0, downgrade is disallowed).
8. 如果本地测试呢你可以用express启动个服务:(你可能用不着)
const express = require'express') const path = require'path') const app = express) // 下面在干嘛,你具体可看:https://www.jianshu.com/p/1d92463ebb69,大概加个路径文件 app.useexpress.staticpath.join__dirname, './client'))) const server = app.listen25565, function ) { const host = server.address).address const port = server.address).port console.log'服务启动', host, port) })
client目录呢就是打包后的yml,exe文件啦。
然后吧上面的那些ull替换为node服务器