<template> <div> <!-- <router-view></router-view> --> <button @click="autoUpdate()">获取更新</button> <ol> <li>生命周期过程展示</li> </ol> </div> </template> <script> // import { ipcRenderer } from 'electron'; const { ipcRenderer } = require('electron'); export default { name: 'my-project1', mounted() { var _ol = document.getElementById("content"); ipcRenderer.on('message',(event,{message,data}) => { let _li = document.createElement("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的安装包。
注意上面一步会生成一个latest.yml文件，autoUpdate 实际上通过检查该文件中安装包版本号与当前应用版本号对比来进行更新判断的。
latest.yml文件内容如下：
2.然后将上一步生成的安装包放在本地开启的服务器文件夹下，对应你在主程序入口文件中配置的服务器位置。
3.将 package.json 中的版本号改回0.0.0，再npm run build一遍，运行 build 文件夹下的 exe 安装包，就将软件安装在你电脑里面了。点击安装完成后桌面上的快捷方式，再次点击上面的获取更新的按钮就可以看到显示在界面的自动更新生命周期了。（但这里因为会给你直接自动更新，所以会一闪而过，你可以在 autoUpdate 的各个生命周期事件里设置主进程与渲染进程通信，则可以一步一步观察到整个自动更新的生命周期了。）
通过测试总结 autoUpdate 生命周期图
更新过程展示
1、无版本更新
2、有版本更新
点击取消后会先不更新，在应用关闭后更新：
点击确认后则会直接更新：
踩过的坑
1、主进程与渲染进程通信
最开始我是直接在主进程直接运行更新
然后想在渲染进程中打印主进程传过来的消息，但是发现只有 isUpdateNow 事件运行时才有日志显示。