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)
      }
    }
  })
}
相关推荐
·云扬·19 分钟前
深度剖析 MySQL 与 Redis 缓存一致性:理论、方案与实战
redis·mysql·缓存
汤姆大聪明1 小时前
Redisson 操作 Redis Stream 消息队列详解及实战案例
redis·spring·缓存·maven
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
爱摄影的程序猿1 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
前端极客探险家2 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
__不想说话__2 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
随笔记2 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
Mintopia3 小时前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise5203 小时前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖3 小时前
初始化项目前的准备
前端·javascript·vue.js