前端版本检测插件，解决服务器更新后用户端页面丢失的问题

插件开发背景：

公司项目每次发布生产包到服务器后，正在使用的客户端此时进行操作，会发生页面资源丢失的情况，因为前端打包后的包部署的路径生成hash值已经变化,客户端再去请求资源时会报错异常，如下图 ：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec。

这时候客户端找不到这些文件资源时，页面卡死，控制台可以看到改错误显示。

目前解决方案有两种，后端通过接口轮询检测，或者前端轮询检测。

后端接口轮询就是不断让前端调接口 查询版本号，如果版本不对，前端强制刷新页面，

前端解决方案：目前绝大部分都是单页面应用，可以轮询获取index.html的js信息来比对，存储版本，检测是否有差异。如果有差异说明前端已重新发包。

本人现已开发好插件：  detection-version  检测前端版本

安装方法：

npm install detection-version

 使用方法：

// 在main.js 中引入
import "./style.css";
import { createApp } from "vue";
import App from "./App.vue";
import detectVersion from "detection-version";

detectVersion({
  open: true,
 //这块建议 从.env 文件中读取 如果是发版到服务器后 开启检测，
 // 本地开发直接关闭即可 不然热更新会阻碍开发
  duration: 5000,
  func: () => {
  //检测到版本更新后 处理逻辑....
    const result = confirm("有新功能发布，请点击确定刷新页面！");
    if (result) {
      location.reload(); //强制刷新 清除缓存
    }
  },
});
const app = createApp(App);
app.mount("#app");

这样子 再也不怕前端发版后，页面突然卡死啦！

源码直接在包中，有兴趣可以学习一下！