Vue检测获取最新资源 解决浏览器缓存问题

Vue检测获取最新资源 解决浏览器缓存问题

1、在public文件夹下创建version.json文件

2、vue.config.js中,每次打包动态更新version.json内容

javascript 复制代码
let fs = require('fs');
const version = new Date().getTime();
let vJSON = require('./public/version.json') || {}
if ( process.env.NODE_ENV === "production" ) {
  vJSON = { 'version': version + '' }
  fs.writeFile('./public/version.json', JSON.stringify(vJSON), () => {
    console.log('新版本号生成成功');
  });
}

3、App.vue中使用定时器去检测版本号和本地是否有差异

javascript 复制代码
timer: null // 定时器实例

this.getLatestResources(true)
// 每半小时监测一次是否有更新
this.timer = setInterval(() => {
  this.getLatestResources()
}, 30 * 60 * 1000)

// 获取最新资源
getLatestResources(b = false) {
  this.$axios.get("/xxxxxxx/version.json",{params:{data: new Date().getTime()}}).then(res => {
    let lastVersion = res.data.version
    let storageVersion = localStorage.getItem("version")
    if (!storageVersion) {
      localStorage.setItem("version", lastVersion)
    } else {
      if(storageVersion != lastVersion){
        localStorage.removeItem("version")
        this.timer && clearInterval(this.timer)
        !b && this.$Modal.info({
          title: "提示",
          content: '检测到系统有更新,请刷新浏览器后使用!',
          onOk: () => {
            this.$router.go(0)
          }
        });
        b && this.$router.go(0)
      }
    }
  })
}
相关推荐
昔人'29 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
saadiya~7 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Sheldon一蓑烟雨任平生8 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
_Johnny_8 小时前
Redis 升级操作指南:单机与主从模式
数据库·redis·缓存
不爱洗脚的小滕8 小时前
【Redis】三种缓存问题(穿透、击穿、双删)的 Golang 实践
redis·缓存·golang
提笔了无痕8 小时前
什么是Redis的缓存问题,以及如何解决
数据库·redis·后端·缓存·mybatis
lang201509288 小时前
Spring Boot缓存机制全解析
spring boot·后端·缓存
萌萌哒草头将军8 小时前
重磅!首个 AI 浏览器发布,ChatGPT Atlas 浏览器问世!🚀🚀🚀
chrome·浏览器·v8