vue 部署线上自动清除浏览器缓冲

场景：前端页面部分样式修改，部署到线上后，用户需要手动清除浏览器缓冲才能看到修改后的效果，用户体验感差。

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].js?v=${Version}`,
      chunkFilename: `js/[name].js?v=${Version}`,
    },
  },
 
  chainWebpack: (config) => {
     config.plugin('extract-css').tap((args) => [
       {
         filename: `css/[name].css?v=${Version}`,
         chunkFilename: `css/[name].css?v=${Version}`,
       },
     ])
  },
}

参考资料

https://blog.csdn.net/qq_42248520/article/details/125333960
https://www.jianshu.com/p/0ea949db0e84