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

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

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache" />

二、打包时生成版本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();
}

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