扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关怎么使用electron-builder及electron-updater给项目配置自动更新的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联公司是一家专业提供阿图什企业网站建设,专注与做网站、成都网站制作、html5、小程序制作等业务。10年已为阿图什众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
自动更新功能使用的项目为 electron-vue 脚手架搭建一个默认项目。
开始：新建一个 electron 项目
首先你得有一个需要配置自动更新功能的 electron 项目。这里我为了测试自动更新功能是否成功搭建使用的是 electron-vue 脚手架搭建的项目。
搭建过程如下：
# 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue autoUpdataTest # 安装依赖并运行你的程序 cd autoUpdataTest npm install npm run dev
程序运行后的界面如下：
脚手架生成的文件结构：
|- autoUpdateTest |- .electron-vue # 压缩及运行环境的配置文件 |- build # |- icons # 图标文件 |- ... # 打包生成的文件在此处 |- dist # 用 webpack 压缩项目后生成的压缩文件在此处 |- node_modules |- src # 资源文件 |- main # 主进程 |- renderer # 渲染进程 |- index.ejx # 入口文件 |- static # 静态资源 |- .babelrc |- .gitignore |- .travis |- appveyor.yml |- package-lock.json # npm 自动生成的文件 |- package.json |- README.md
使用 electron-builder 最关键的配置在 package.json 里：（为了观察我们所需要的地方，把此篇文章里不需要关注的代码给删掉了。）
{
"name": "autoupdatetest",
"version": "0.0.0",
"author": "wonder ",
"description": "An electron-vue project",
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"dev": "node .electron-vue/dev-runner.js",
},
"build": {
"productName": "autoupdateteset",
"appId": "org.simulatedgreg.electron-vue",
"directories": {
"output": "build"
},
"files": "dist/electron/**/*",
"win": {
"icon": "build/icons/icon.ico"
}
},
"dependencies": {
},
"devDependencies": {
}
} 解析：
前四行是一般的 package.json 会有的：
name — 项目名
version — 版本号
author — 开发人员及邮箱号
description — 项目描述 。
下面重点看后面的内容：electron-builder详细配置文档
"main": "./dist/electron/main.js" — 这里的 main 入口文件指的是用 electron-builder 打包主程序的入口文件，这里的路径是使用 webpack 压缩项目后文件输出的位置。
scripts — 脚本
"build": "node .electron-vue/build.js && electron-builder" — 生产环境，压缩打包项目。先运行 .electron-vue 文件夹下的 build.js 脚本对项目进行压缩，输出的位置在 dist 文件夹下，然后再使用配置好的 electron-builder 对 dist 文件夹下的文件进行打包生成应用的安装包。
"dev": "node .electron-vue/dev-runner.js" — 开发环境，可以运行我们的项目并测试。这里使用了热更新，改动代码不需要刷新即可看到应用的改变。
build — electron-builder 配置项
"productName": "autoupdateteset", — 工程项目名
"appId": "org.simulatedgreg.electron-vue" — 应用程序 ID。强烈建议设置显式ID。
directories
"output": "build" — 生成的安装包输出目录。
"files": "dist/electron/**/*" — 安装包源文件目录，支持多路径（数组）
"win": { "icon": "build/icons/icon.ico"} — 打包成 Windows 系统下安装包应用程序图标路径，还有别的配置项可以在详细文档中查看。
有关 electron-vue 的使用的更详细的说明请看 中文文档。
自动更新
安装依赖
自动更新功能的实现依赖 electron-builder 和 electron-updater。
因为我们是用的electron-builder脚手架生成的项目，已经有 electron-builder 依赖了，所以只需要安装 electron-updater。
# 目录 E:\GitHub\autoupdateteset npm i electron-updater --save # 必须安装为运行依赖，否则运行会出错
配置 package.json
为了配合打包 package.json 需要给 build 新增配置项：
"build": {
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:5500/" #这里是我本地开的服务器的地址
}
],
...
}主进程(参考：electron 中文文档)
主进程的入口文件是 src/main/index.js。
import {
app, // app 模块是为了控制整个应用的生命周期设计的。
BrowserWindow, // BrowserWindow 类让你有创建一个浏览器窗口的权力。
ipcMain
} from 'electron';
// 引入自动更新模块
const { autoUpdater } = require('electron-updater');
// 不支持 ES6 则用如下方式引入
// const autoUpdater = require("electron-updater").autoUpdater
const feedUrl = `http://127.0.0.1:5500/win32`; // 更新包位置
/**
* Set `__static` path to static files in production
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
*/
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\');
}
let mainWindow, webContents;
const winURL = process.env.NODE_ENV === 'development' ?
`http://localhost:9080` :
`file://${__dirname}/index.html`;
function createWindow() {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
});
mainWindow.loadURL(winURL);
webContents = mainWindow.webContents;
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// 主进程监听渲染进程传来的信息
ipcMain.on('update', (e, arg) => {
console.log("update");
checkForUpdates();
});
let checkForUpdates = () => {
// 配置安装包远端服务器
autoUpdater.setFeedURL(feedUrl);
// 下面是自动更新的整个生命周期所发生的事件
autoUpdater.on('error', function(message) {
sendUpdateMessage('error', message);
});
autoUpdater.on('checking-for-update', function(message) {
sendUpdateMessage('checking-for-update', message);
});
autoUpdater.on('update-available', function(message) {
sendUpdateMessage('update-available', message);
});
autoUpdater.on('update-not-available', function(message) {
sendUpdateMessage('update-not-available', message);
});
// 更新下载进度事件
autoUpdater.on('download-progress', function(progressObj) {
sendUpdateMessage('downloadProgress', progressObj);
});
// 更新下载完成事件
autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
sendUpdateMessage('isUpdateNow');
ipcMain.on('updateNow', (e, arg) => {
autoUpdater.quitAndInstall();
});
});
//执行自动更新检查
autoUpdater.checkForUpdates();
};
// 主进程主动发送消息给渲染进程函数
function sendUpdateMessage(message, data) {
console.log({ message, data });
webContents.send('message', { message, data });
}
app.on('ready', () => {
createWindow();
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});渲染进程
渲染进程的入口文件是 src/renderer/index.js。
这里我们主要修改 App.vue，将原来的内容全删掉并使更新的整个周期在界面上打印出来。