解决Vue项目每次更新浏览器缓存问题

图片[1]-解决Vue项目每次更新浏览器缓存问题-小栋博客

解决思路

打包的时候给每个打包文件后面加一个时间戳,通过vue.config/vite配置
const timeStamp = new Date().getTime()

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/chunk.[id].js?v=${timeStamp}`,
    }
  },
  css: { 
    extract: { 
      filename: `css/[name].css?v=${timeStamp}`,
      chunkFilename: `css/chunk.[id].css?v=${timeStamp}`,
    }
  },

解决原理

使用时间戳来作为版本号来解决项目部署缓存的问题是,它会确保每次构建的文件名中都包含最新的时间戳,从而迫使浏览器重新加载新的文件

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容