如何使用电子构建器和电子更新器自动更新项目配置

描述：

本文自动更新功能中使用的项目是电子真空脚手架的默认项目。

参考文献如下：

电子-vue中文文档电子-builder文档电子应用支架支持Windows下自动更新电子文档Docs/API/autoUpdater启动：创建新的电子项目

首先，你必须有一个需要配置自动更新功能的电子项目。在这里，为了测试自动更新功能是否搭建成功，我使用了electronic-vue脚手架项目。

施工过程如下：

#安装vue-cli和脚手架模板代码NPM install-g vue-CLI vue init模拟Greg/electron-vue autoupdata test #安装并运行您的程序CD autoupdatatest NPM安装NPM运行dev。程序运行后的界面如下：

脚手架生成的文件结构：

|-自动更新测试|-。电子-vue #压缩和运行环境配置文件|-构建# |-图标#图标文件|-.# packed generated file here |-dist #用webpack压缩项目后生成的压缩文件here |- node_modules | -src #资源文件|- main #主进程|-渲染器#渲染进程|- index.ejx #条目文件|- static #静态资源|-。babelrc |-。gitignore |-。Travis |-appveyor . yml |-package-lock . JSON #文件由NPM自动生成|- package.json |- README.md在package.json中使用电子构建器进行配置：(为了观察我们需要什么，我们删除了本文中不需要注意的代码。)

{ 'name': 'autoupdatetest '，' version': '0.0.0 '，' author ' : ' wonder[email protected]'，' description ' : ' An electronic-vue project '，' main': '。/dist/electron/main.js '，' scripts': { 'build': '节点。electronic-vue/build . js electronic-builder '，' dev': '节点。electronic-vue/dev-runner . js '，}，' build ' : { ' ProductName ' : ' autoupdateteset '，' appId ' : ' org . simulated reg . electronic-vue '，' directory ' : { ' output ' : ' build ' }，' files ' : ' dist/electronic/* */*，' win ' 3: { ' icon ' 3360 ' build/icons/icons . icon ' } '

前四行是常见的package.json:

名称—项目名称版本—版本号作者—开发人员和电子邮件号描述—项目描述。以下重点介绍以下内容：电子建造商详细配置文件

Main' :/dist/electronic/main . js’—这里的主入口文件是指用electronic-builder打包的主程序的入口文件，这里的路径是项目用webpack压缩后文件的输出位置。脚本-脚本“构建”:节点。“electronic-vue/build . js electronic-builder”——生产环境、压缩和包装项目。在下运行build.js脚本。e-vue文件夹压缩项目，输出位置在dist文件夹下，然后使用配置好的e-builder将dist文件夹下的文件打包生成应用安装包。Dev' : '节点。electronic-vue/dev-runner . js '-开发环境，可以运行我们的项目并进行测试。这里使用了热更新，您可以看到应用程序的更改，而无需刷新更改的代码。build-electronic-builder配置项' product name ' : ' auto update teset '，-工程项目名称' appID ' : ' org . simulated Greg . electronic-vue '-应用程序ID。强烈建议设置显式标识。目录“输出”:“构建”-生成的安装包的输出目录。文件“:”dist/electron/* */*—安装包的源文件目录，支持多路径(数组)。”win ' : { ' icon ' 3360 ' build/icons/icon . ico ' }—Windows系统下安装包的应用图标路径，其他配置项可以在详细文档中查看。有关电子真空设备使用的更详细说明，请参考中文文档。

自动更新

安装依赖关系

自动更新功能的实现依赖于电子构建器和电子更新器。

因为我们是用的电子生成器脚手架生成的项目，已经有电子生成器依赖了，所以只需要安装电子更新器。

# 目录e : \ GitHub \ autoupdatetesetnpm I电子更新程序-保存#必须安装为运行依赖，否则运行会出错配置package.json

为了配合打包package.json需要给建设新增配置项：

build ' : { ' publish ' :[{ ' provider ' : ' generic '，' URL ' : ' http://127。0 .0 .1:5500/' #这里是我本地开的服务器的地址} ],}主进程（参考：电子中文文档)

主进程的入口文件是src/main/index.js。

导入{ app，//app模块是为了控制整个应用的生命周期设计的浏览器窗口，//浏览器窗口类让你有创建一个浏览器窗口的权力ipcMain }来自"电子";//引入自动更新模块const { autoUpdater }=require(' electronic-updater ')；//不支持ES6则用如下方式引入//const autoUpdater=require(电子更新程序).autoUpdaterconst提要URl=` http://127。0 .0 .1:5500/win32 `;//更新包位置/** *设置生产中静态文件的`_ _静态'路径* https://模拟注册。该死的书。io/electronic-vue/content/en/using-static-assets。html */if(进程。ENV。node _ ENV！=='发展'){全球__static=require(路径).join(__dirname，'/static ').替换(/\\/g，' \ \ \ \ ')；}让mainWindow、webContentsconst WinURl=进程。ENV。NODE _ ENV=='开发'？` http://localhost :9080 ` : ` file :/$ { _ _ dirname }/index。html `；函数createWindow() { /** *初始窗口选项*/主窗口=新浏览器窗口({高度： 563，useContentSize: true，宽度： 1000 })；主窗口。load URl(WinURl)；webContents=mainwindow。webContentsmainWindow.on('closed ')，()={ main window=null })；}//主进程监听渲染进程传来的信息ipcMain.on('update '，(e，arg)={ console。日志('更新')；checkForUpdates()；});让checkForUpdates=()={ //配置安装包远端服务器自动更新程序。setFeedURl(FeedURl)；//下面是自动更新的整个生命周期所发生的事件autoUpdater.on('错误'，函数（消息){ sendUpdateMessage('错误'，消息);});' autoUpdater.on('检查更新，函数（消息){ sendUpdateMessage('检查更新，消息);});自动更新程序。开启('更新可用'，函数（消息){ senupdatemessage('更新可用'，消息);});自动更新程序。打开('更新-不可用，函数（消息){ senupdatemessage(' update-不可用，消息);});//更新下载进度事件自动更新程序。打开('下载进度'，函数(进度obj){ sendUpdateMessage('下载进度'，进度obj)；});//更新下载完成事件自动更新程序。打开(‘更新-下载’)，函数（事件、releaseNotes、releaseName、releaseDate、updateUrl、quitAndUpdate){ send updatemessage(' ISUP datow ')；ipcMain.on('updateNow '，(e，arg)={ autoupdater。quitandinstall()；});});//执行自动更新检查自动更新程序。checkforupdates()；};//主进程主动发送消息给渲染进程函数函数sendUpdateMessage(消息，数据){ console . log({ 0消息，数据});webContents.send('message '，{ message，data })；}app.on('ready '，()={ createWindow()；});app.on('window-all-closed '，()={ if (process.platform！=='达尔文){ app。退出()；}});app.on('activate '，()={ if(主窗口===null){ createWindow()；}});渲染进程

渲染进程的入口文件是src/渲染器/index.js。

这里我们主要修改App.vue，将原来的内容全删掉并使更新的整个周期在界面上打印出来。

模板div id='app '！-router-view/router-view-button @ click=' auto update()'获取更新/button ol id=' content ' lilife cycle process presentation/Li/ol/div/template script//从' electronic '导入{IPC渲染器}；const { ipcRenderer }=require(' electron ')；导出默认{ name: 'my-project1 '，已装入(){ var _ ol=document . getelementbyid(' content ')；ipcRenderer.on('message '，(event，{message，data })={ let _ Li=document . create element(' Li ')；_ Li . innerhtml=message ' brdata : ' JSON . stringify(data)' HR '；_ ol . appendchild(_ Li)；If(消息===' isupdatow '){ if(确认('立即更新？)){ ipcrenderer . send(' updateNow ')；} } });}，methods : { autoUpdate(){ ipcrenderer . send(' update ')；} }};/scriptstyle/* CSS *//style显示如下界面：

自动更新过程简介

1.首先将webpack.json中的版本号更改为0.0.1，然后npm run build生成版本为0.0.1的安装包。

注意上一步会生成一个最新的. yml文件，autoUpdate实际上是通过检查这个文件中的安装包版本号和当前应用版本号的比较来进行更新判断的。

最新的. yml文件如下所示：

2.然后将上一步生成的安装包放在本地打开的服务器文件夹下，对应于您在主程序入口文件中配置的服务器位置。

3.将package.json中的版本号改回0.0.0，再次运行npm run build，在build文件夹下运行exe安装包，软件将安装在您的计算机上。安装完成后点击桌面上的快捷方式，再次点击上面的获取更新按钮，即可看到界面上显示的自动更新生命周期。(但是在这里，因为它会给你直接自动更新，它会闪而过。可以在autoUpdate的每个生命周期事件中设置主进程和渲染进程之间的通信，可以一步步观察自动更新的整个生命周期。)

通过测试总结自动更新生命周期图

更新流程演示文稿

1.没有版本更新

2.有一个版本更新

单击“取消”后，不会首先更新，而是在应用程序关闭后更新：

点击确认后，将直接更新：

踩坑了

1.主进程与渲染进程通信

一开始，我直接在主进程中运行更新

然后，我想在渲染过程中打印来自主进程的消息，但是我发现只有当isUpdateNow事件运行时，才会有日志显示。

原来，主进程和渲染进程之间的通信只能在渲染进程运行时进行(即界面完全显示)。因此，我将自动更新改为界面按钮触发，从而检测自动更新的全过程。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。