vue+vite根据版本号清空用户浏览器缓存

项目生产环境发布新版本之后,用户可能会因为一些本地缓存的数据不一样而导致页面报错。这时候可以根据版本号去清空用户缓存。

1、在package.json文件中有一个管理版本号属性:version,在每次打包部署之前修改当前版本号。

2、在main.js文件中,加入版本号的判断逻辑,版本号不一致就重新加载,代码如下:

javascript 复制代码
//根据版本号清空用户缓存
import {version} from '../package.json';
const VUE_APP_VERSION = version
const vers = window.localStorage.getItem("Version");
if (VUE_APP_VERSION != vers) {
    localStorage.clear();
    sessionStorage.clear();
    Cookies.remove("token");
    window.localStorage.setItem("Version", VUE_APP_VERSION);
    location.reload()
}
相关推荐
syty20204 分钟前
RedisTemplate方法汇总
前端·bootstrap·html
何中应6 分钟前
使用Spring自带的缓存注解维护数据一致性
java·数据库·spring boot·后端·spring·缓存
懒大王、6 分钟前
Vue dcm文件预览
前端·javascript·vue.js·dcm·cornerstone.js
C_心欲无痕10 分钟前
Docker 本地部署 SSR 前端项目实战指南
前端·docker·容器
梵得儿SHI20 分钟前
Vue 高级特性:组件高级用法(动态组件、异步组件、组件缓存 keep-alive)
前端·javascript·vue.js·keep-alive·异步组件·动态组件·vue组件高级特性
EndingCoder21 分钟前
泛型类和高级用法
linux·运维·前端·ubuntu·typescript
ℋᙚᵐⁱᒻᵉ鲸落27 分钟前
【Vue3】Element Plus 表单显示自定义校验错误
前端·javascript·vue.js
程序员小寒28 分钟前
聊一聊 CommonJS 和 ES6 Module
前端·ecmascript·es6
Java后端的Ai之路29 分钟前
【AI应用开发工程师】-Gemini写前端的一个坑
前端·人工智能·gemini·ai应用开发工程师
亿元程序员29 分钟前
最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...
前端