前端发版(发包)缓存，需要强制刷新问题处理
问题原因： 浏览器问题
一、创建初始版本文件(public/version.json)
{ "version": "1722240835844" }
二、设置版本判断（version.js）
import axios from "axios";const isNewVersion = () => {let baseUrl = `/version.json?t=${new Date().getTime()}`;axios.get(baseUrl).then((res) => {if (res.status === 200) {let webappVersion = res.data.version;//当前项目发布的版本let localWebappVersion = localStorage.getItem("webappVersion");//缓存中的版本if (localWebappVersion && localWebappVersion != webappVersion) {// 如果没有缓存版本 或者 缓存版本与当前项目发布版本不一致时 强行刷新localStorage.setItem("webappVersion", webappVersion);window.location.reload();return;} else {localStorage.setItem("webappVersion", webappVersion);}}});
};
export default isNewVersion;三、设置全局监听(main.js. permission.js)
router.beforeEach((to, from, next) => {//判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新isNewVersion();
});
四、生成打包版本（vite.config.js）
- 引入变量
const path = require("path");const fs = require("fs");
- 生成版本代码
// 如果当前时打包行为 生成最新版本号if (command == "build") {//打包时生成版本号let version = {version: JSON.stringify(new Date().getTime()),};fs.writeFile("./public/version.json", JSON.stringify(version), () => {console.log("新版本号生成成功", version);});}