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)
      }
    }
  })
}
相关推荐
二十雨辰几秒前
vite如何处理项目中的资源
开发语言·javascript
洛可可白1 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
野犬寒鸦1 小时前
从零起步学习Redis || 第四章:Cache Aside Pattern(旁路缓存模式)以及优化策略
java·数据库·redis·后端·spring·缓存
Terio_my1 小时前
Spring Boot 缓存技术详解
spring boot·后端·缓存
茉莉玫瑰花茶2 小时前
Redis - Bitfield 类型
数据库·redis·缓存
四月_h2 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate3 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古3 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
疯狂踩坑人5 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
Terio_my5 小时前
Spring Boot 缓存与验证码生成
spring boot·spring·缓存