vue项目发布有缓存，正式环境不更新（解决方案）

Jacob程序员

已于 2024-01-19 11:01:39 修改

阅读量678

点赞数 12

文章标签： vue.js 缓存前端

于 2024-01-15 11:39:57 首次发布

本文链接：https://blog.csdn.net/weixin_45609702/article/details/135597570

版权

文章介绍了如何在Vue项目中解决发布后正式环境不更新的问题，方法包括在public目录添加version.json文件记录版本号，通过src中的versionUpdate.js进行版本检查并提示用户刷新，以及在路由拦截器中实现版本不同时自动刷新页面以清除浏览器缓存。

摘要由CSDN通过智能技术生成

vue项目发布有缓存，正式环境不更新（解决方案）

原博主vue项目发布有缓存，正式环境不更新

1.在public静态目录下新建version.json每次发版更改里面的版本号

{
    "version": "0.0.1"
}

2.在src中新建 libs/versionUpdate.js文件

import axios from 'axios'
 
const isNewVersion = () => {
  let url = `//${window.location.host}/version.json?t=${new Date().getTime()}`
  axios.get(url).then(res => {
    if (res.status === 200) {
      let vueVersion = res.data.version || '1.0.0'
      let localVueVersion = localStorage.getItem('vueVersion')
      localStorage.setItem('vueVersion', vueVersion)
      if (localVueVersion && localVueVersion != vueVersion) {
        alert('检测到新版本，请点击确认刷新页面哦')
        window.location.reload(true)
        return
      }
    }
  })
}
 
export default {
  isNewVersion
}

3.在全局路由拦截中写，只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存

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