vue 版本更新后需要清除缓存问题

qq_42248520

已于 2025-07-14 15:33:55 修改

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 小优化文章标签： vue.js 缓存 javascript 前端

于 2022-06-17 15:12:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42248520/article/details/125333960

vue 小优化专栏收录该内容

2 篇文章

订阅专栏

本文探讨了浏览器缓存导致的前端资源未及时更新的问题，以及如何通过在index.html中添加meta标签禁止缓存，并在vue.config.js中配置Webpack添加时间戳来区分资源版本，确保每次部署都能获取到最新的JS和CSS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么会出现这个问题?

仔细看引用的js 发现更新前后引用的JS路径是一样的，而js是从服务器上下载本地浏览器的，如果不刷新浏览器缓存。更新后引用JS，CSS，还有一些静态资源还都是浏览器缓存中

注:css,js,html 等都会有相关缓存

问题处理:

1. index.html添meta标签,表示页面不缓存

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

2. vue.config.js 配置js,css打包配置,在css,js打包文件添加时间戳,区别版本

const path = require('path')
const Version = new Date().getTime()
const isPro = process.env.NODE_ENV === 'production'
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].${Version}.js`,
      chunkFilename: `js/[name].${Version}.js`,
    },
  },

  chainWebpack: (config) => {
    if (isPro) { 
      config.plugin('extract-css').tap((args) => [
        {
          filename: `css/[name].${Version}.css`,
          chunkFilename: `css/[name].${Version}.css`,
        },
      ])
    }
  },
  //....其他配置
}

总结:通过 meta标签设置不缓存,配置css js 打包添加时间戳,通过isPro判断版本打包处理

const isPro = process.env.NODE_ENV === 'production'
if(isPro){
......
}