介绍说明

此插件作用：通过前端来控制版本检测的工具，主要是为了解决前端 dist 包更新到服务器后，客户端正在使用前端页面，导致页丢失的问题，所以可以通过该插件检测到版本更新后，执行回调，提示用户更新页面、强制刷新页面等操作。 原理是采用的 轮询机制，通过轮询查询前端打包工具生成的 js 版本号进行比对，使用浏览器 localStroage API 进行版本号存储，当版本号发生变化时，执行回调。

安装

npm install detection-version

导入

import detectVersion from "detection-version";

页面 dom 生成后调用

/**
 * open: boolean; 是否开启版本检测， 为true开启检测
 */
/**
 * path?: string;部署路径的前缀 如果静态资源地址有前缀，则需要传入
 */
/**
 * duration: number; 轮询查询间隔 单位ms 默认每五秒进行一次比对
 */

/**
 * func：function;  检测到版本更新后的执行回调,如果不传 默认执行提示弹窗
 */
detectVersion({
  open: true,
  duration: 5000,
  path: "/h5/", //例如部署到了10.200.1.15:8080/h5/
  func: () => {
    // 这里执行 版本更新检测到后 你的逻辑
    const result = confirm("有新功能发布，请点击确定刷新页面！");
    if (result) {
      location.reload(); //强制刷新 清除缓存
    }
  },
});

示例 vue 模版

// 在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");

注意事项

APP 端目前没有测试使用 ，主要还是用在 pc 端，因为目前使用的浏览器 localStroage 存储的版本号，所以 APP 端需要自己实现版本号存储，目前没有测试使用

开源协议

ISC