前端发版(发包)缓存,需要强制刷新问题处理

问题原因: 浏览器问题

一、创建初始版本文件(public/version.json)

js 复制代码
{ "version": "1722240835844" }

二、设置版本判断(version.js)

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)

js 复制代码
router.beforeEach((to, from, next) => {
  //判断当前代码版本是否与服务器中代码版本一致,如不一致则刷新页面获取最新
  isNewVersion(); 
});

四、生成打包版本(vite.config.js)

  1. 引入变量
js 复制代码
    const path = require("path");
    const fs = require("fs");
  1. 生成版本代码
js 复制代码
	// 如果当前时打包行为 生成最新版本号
	if (command == "build") {
	    //打包时生成版本号
	    let version = {
	      version: JSON.stringify(new Date().getTime()),
	    };
	    fs.writeFile("./public/version.json", JSON.stringify(version), () => {
	      console.log("新版本号生成成功", version);
	    });
  	}
相关推荐
花花鱼6 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09339 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135831 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning31 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人41 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf