Vue针对微信H5强缓存，定义H5刷新机制及其余浏览器清除缓存配置

一、html头部补签插入以下内容：

二、打包时生成版本json文件

import { sep } from 'path';
import { mkdir, writeFile, existsSync } from 'fs';

import { name } from '../../package.json';

function writeVersion(versionFile, content) {
  // 写入文件
  writeFile(versionFile, content, (err) => {
    if (err) throw err;
  });
}

export function useVersion(option) {
  let config = {
    publicDir: `dist\\${name}`
  };

  return {
    name: 'version-update',

    configResolved(resolvedConfig) {
      // 存储最终解析的配置
      config = resolvedConfig;
    },
    buildStart() {
      // 生成版本信息文件路径
      const file = `${config.publicDir}${sep}version.json`;
      // 这里使用编译时间作为版本信息
      const content = JSON.stringify({ version: option.version });

      if (existsSync(config.publicDir)) {
        writeVersion(file, content);
      } else {
        mkdir(config.publicDir, (err) => {
          if (err) throw err;
          writeVersion(file, content);
        });
      }
    }
  };
}

三、定义监测脚本文件
monitor-version.js

// 更新类型机制分为两大类 (1、缺陷修复、小功能细节优化；2、版本需求更新优化)
const versionType: new Map([['版本更新', 'Y'], ['缺陷修复', 'N']]),

// 版本更新
const versionRefresh = {
    // 日监测次数,每日24次定时监测是否进行了缺陷修复更新,平均每小时1次
    monitorDay: 24,
    // 修复更新时间
    repairTime: null,
}


// 更新版本校验函数
async function versionCheck() {
  if (import.meta.env.PROD) {
    const response = await axios.get(`version.json?v=${new Date().getTime()}`);
    return response.data;
  }
}

// 定时刷新函数
async function intervalRefresh() {
    // pageVersionCheck是否开启版本验证
    if (!pageVersionCheck) return;
    const cacheVersionRefreshCfg = getLocal('cacheVersionRefreshCfg');
    let { monitorDay, repairTime } = cacheVersionRefreshCfg || bugRefresh;
    // 日间隔监测次数间隔时间戳
    const dayTime = 24 * 60 * 60 * 1000 / monitorDay;
    // 获取版本更新信息满足条件
    // 1、存在监测更新次数monitorDay
    // 2、更新修复时间存在，且当前时间距离上次超出监测次数间隔时间戳
    const isMeet = monitorDay && (repairTime && repairTime - dayTime > Date.now());
    if (!isMeet) return;
    // 获取更新部署时间戳,也用来当作版本比对
    const { version: newRepairTime, updateType } = await versionCheck();
    if (repairTime !== newRepairTime) {
        const isVersionUpdate = versionType.get('版本更新') === updateType;
        Dialog.confirm({
          message: `${isVersionUpdate ? '大版本优化' : '功能优化调整'}，是否更新？`,
        }).then(() => {
            monitorDay -= 1;
            setLocal('cacheVersionRefreshCfg', {
                monitorDay,
                repairTime: newRepairTime,
            });
            window.location.reload();
            // 存在监测更新次数monitorDay，开始延时回调处理
            // if (monitorDay) {
            //    setTimeout(() => {
            //        intervalRefresh();
            //    }, dayTime);
            // }
          }).catch(() => {
            // on cancel
          });
    }
}

// 更新机制执行
function onCarry() {
    const cacheVersionRefreshCfg = getLocal('cacheVersionRefreshCfg');
    const { monitorDay, repairTime } = cacheVersionRefreshCfg || bugRefresh;
    const currentTime = Date.now();
    if (!repairTime) {
        setLocal('cacheVersionRefreshCfg', {
            monitorDay,
            repairTime: currentTime,
        });
    }
    // 不是同一天，监测机制信息还原
    if (dayjs(repairTime).format('dd') !== dayjs(currentTime).format('dd')) {
        setLocal('cacheVersionRefreshCfg', {
            monitorDay: 24,
            repairTime: currentTime,
        });
    }
    intervalRefresh();
}

/* 放入路由前置守卫中时,可注释定时器触发回调 */