监测应用版本更新
- 一、版本更新判断核心
- 二、项目入口文件src/App.vue中引入封装好的检查版本更新组件：
- 三、组件内容：
- 1. 引入依赖
- 2. 定义变量
- 3. checkRefresh 函数
- 4. start 函数
- 5. 生命周期钩子
- 四、组件完整示例：
文件内容的变化反映版本更新；HTML 结构和内容: 通常，应用程序的主要 HTML 文件（如 index.html）包含了应用的核心结构和引用的资源（如 JavaScript 和 CSS 文件）。当应用程序进行版本更新时，可能会对该文件进行修改，例如更改版本号、更新引用的脚本或样式表，或者其他内容。
一、版本更新判断核心
await axios.get("./index.html?_timestamp=" + new Date().getTime(), { timeout: 5000 }).then((resp) => resp.data.toString()).catch(() => "");
二、项目入口文件src/App.vue中引入封装好的检查版本更新组件：
importUpdateNotifyfrom'@/components/UpdateNotify.vue'...<!--检查版本更新--><UpdateNotify/>三、组件内容：
1. 引入依赖
import{onMounted,onUnmounted}from"vue";importaxiosfrom"axios";- onMounted 和 onUnmounted: 这些是 Vue 3 的生命周期钩子，用于在组件挂载和卸载时执行特定代码。
- axios:一个用于处理 HTTP 请求的库，在此组件中用于获取 HTML 内容。
2. 定义变量
letlastHtml:string='';constDURATION=6000;lettimer:any;- lastHtml: 用于存储上一次获取的 HTML 内容，以便进行比较。
- DURATION: 定义检查更新的时间间隔（6000 毫秒，即 6 秒）。
- timer: 用于存储定时器的 ID，以便能够在组件卸载时清除它。
3. checkRefresh 函数
asyncfunctioncheckRefresh(){constnewHtml=awaitaxios.get("./index.html?_timestamp="+newDate().getTime(),{timeout:5000}).then((resp)=>resp.data.toString()).catch(()=>"");letflag=false;if(newHtml&&lastHtml){flag=newHtml!=lastHtml;}else{if(newHtml){lastHtml=newHtml;}}returnflag;}功能: 此函数发送一个 GET 请求以获取当前的 index.html 文件。为了避免缓存，它在请求 URL 中添加了一个时间戳。
逻辑:
- 如果成功获取到新的 HTML 内容 (newHtml)，则与之前的内容 (lastHtml) 进行比较。
- 如果内容不同，表示有更新，返回 true；如果没有更新，返回 false。
- 如果这是第一次获取 newHtml，则将其存储到lastHtml 中。
4. start 函数
functionstart(){timer=setInterval(async()=>{constwillUpdate=awaitcheckRefresh();if(willUpdate){openNotification();clearInterval(timer);}},DURATION);}- 功能: 启动一个定时器，每隔 DURATION 毫秒调用 checkRefresh 函数。
- 逻辑:
- 如果检测到新版本（willUpdate 为 true），则调用 openNotification() 来显示更新通知，并清除定时器。
5. 生命周期钩子
onMounted(()=>{if(process.env.NODE_ENV!=='development'){start();}});onUnmounted(()=>{if(timer){clearInterval(timer);}});- onMounted: 当组件挂载后，检查当前环境。如果不是开发环境，则调用 start() 开始检查更新。
- onUnmounted: 在组件卸载时，如果定时器存在，则清除它，以避免内存泄漏。
四、组件完整示例：
<script setup lang="ts">import{onMounted,onUnmounted}from"vue";importaxiosfrom"axios";letlastHtml:string='';constDURATION=6000;lettimer:any;asyncfunctioncheckRefresh(){constnewHtml=awaitaxios.get("./index.html?_timestamp="+newDate().getTime(),{timeout:5000}).then((resp)=>resp.data.toString()).catch(()=>"");letflag=falseif(newHtml&&lastHtml){flag=newHtml!=lastHtml;}else{if(newHtml){lastHtml=newHtml;}}returnflag}functionstart(){timer=setInterval(async()=>{constwillUpdate=awaitcheckRefresh();if(willUpdate){openNotification()clearInterval(timer)}},DURATION)}constopenNotification=()=>{ElMessageBox.confirm('您現在使用的是舊版本，請點擊按鈕刷新瀏覽器使用','版本更新',{confirmButtonText:'刷新',showCancelButton:false,type:'warning',closeOnClickModal:false,closeOnPressEscape:false,}).then(()=>{window.location.reload();// 强制刷新页面}).catch(()=>{});};onMounted(()=>{// 生产环境检查版本更新if(process.env.NODE_ENV!=='development'){start()}})onUnmounted(()=>{if(timer){clearInterval(timer);}})</script><template><div></div></template><style scoped lang="less"></style>
