监测应用版本更新

文件内容的变化反映版本更新；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>