如何使⽤electron-builder及electron-updater给项⽬配置⾃动更新说明：
本⽂的⾃动更新功能使⽤的项⽬为 electron-vue 脚⼿架搭建⼀个默认项⽬。
参考的⽂章如下：
electron-vue 中⽂⽂档
electron-builder ⽂档
Windows 下⽀持⾃动更新的 Electron 应⽤脚⼿架
Electron ⽂档 Docs / API / autoUpdater
开始：新建⼀个 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
|- l
|- package-lock.json # npm ⾃动⽣成的⽂件
|- package.json
|- README.md
使⽤ electron-builder 最关键的配置在 package.json ⾥：（为了观察我们所需要的地⽅，把此篇⽂章⾥不需要关注的代码给删掉了。）
{
"name": "autoupdatetest",
"version": "0.0.0",
"author": "wonder <xxxxxxxxx@qq>",
"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 — 项⽬描述。
下⾯重点看后⾯的内容：
"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 新增配置项：
{
"provider": "generic",
"url": "127.0.0.1:5500/" #这⾥是我本地开的服务器的地址
}
],
...
}
主进程(参考：)
主进程的⼊⼝⽂件是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 = `127.0.0.1:5500/win32`; // 更新包位置
/**
* Set `__static` path to static files in production
* simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html  */
if (v.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\');
}
let mainWindow, webContents;
const winURL = v.NODE_ENV === 'development' ?
`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;
<('closed', () => {
mainWindow = null;
});
}
// 主进程监听渲染进程传来的信息
<('update', (e, arg) => {
console.log("update");
checkForUpdates();
});
let checkForUpdates = () => {
// 配置安装包远端服务器
autoUpdater.setFeedURL(feedUrl);
// 下⾯是⾃动更新的整个⽣命周期所发⽣的事件
<('error', function(message) {
sendUpdateMessage('error', message);
});
<('checking-for-update', function(message) {
sendUpdateMessage('checking-for-update', message);
});
<('update-available', function(message) {
sendUpdateMessage('update-available', message);
});
<('update-not-available', function(message) {
sendUpdateMessage('update-not-available', message);
});
// 更新下载进度事件
<('download-progress', function(progressObj) {
sendUpdateMessage('downloadProgress', progressObj);
});
// 更新下载完成事件
<('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {  sendUpdateMessage('isUpdateNow');
<('updateNow', (e, arg) => {
autoUpdater.quitAndInstall();
});
});
//执⾏⾃动更新检查
electron vue教程autoUpdater.checkForUpdates();
};
// 主进程主动发送消息给渲染进程函数
function sendUpdateMessage(message, data) {
console.log({ message, data });
webContents.send('message', { message, data });
}
<('ready', () => {
createWindow();
});
<('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
<('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
渲染进程
渲染进程的⼊⼝⽂件是src/renderer/index.js。
这⾥我们主要修改App.vue，将原来的内容全删掉并使更新的整个周期在界⾯上打印出来。
<template>
<div id="app">
<!-- <router-view></router-view> -->
<button @click="autoUpdate()">获取更新</button>
<ol id="content">
<li>⽣命周期过程展⽰</li>
</ol>
</div>
</template>
<script>
// import { ipcRenderer } from 'electron';
const { ipcRenderer } = require('electron');
export default {
name: 'my-project1',
mounted() {
var _ol = ElementById("content");
<('message',(event,{message,data}) => {
let _li = ateElement("li");
_li.innerHTML = message + " <br>data:" + JSON.stringify(data) +"<hr>";
_ol.appendChild(_li);
if (message === 'isUpdateNow') {
if (confirm('是否现在更新？')) {
ipcRenderer.send('updateNow');
}
}
});
},
methods: {
autoUpdate() {
ipcRenderer.send('update');
}
}
};
</script>
<style>
/* CSS */
</style>
显⽰的界⾯如下：
⾃动更新过程简单介绍
1.将 webpack.json ⾥的版本号先改为 0.0.1，然后npm run build⽣成⼀个版本为0.0.1的安装包。
注意上⾯⼀步会⽣成⼀个l⽂件，autoUpdate 实际上通过检查该⽂件中安装包版本号与当前应⽤版本号对⽐来进⾏更新判断的。l⽂件内容如下：
2.然后将上⼀步⽣成的安装包放在本地开启的服务器⽂件夹下，对应你在主程序⼊⼝⽂件中配置的服务器位置。