vue 打包出现的缓存问题

vue 项目每一次打包上线，都会有浏览器缓存问题，需要用户手动清除缓存，十分麻烦

解决方案

1. 对编译打包文件增加时间戳

每次打包改变js的名称就OK了，在 vue.config.js 下修改/添加出口 output，通过时间戳命名使每次包的名称都不一样

• vue-cli3 中

  const  Timestamp = new Date().getTime(); //时间戳
  
  configureWebpack: {
        
        
  	output: {
        
         
  	   filename: 'js/[name].'+Timestamp+'.js',
  	   chunkFilename: 'js/[name].'+Timestamp+'.js'
  	}
  }
  
  

• vue-cli2 中

  const  Timestamp = new Date().getTime();
  
  output: {
        
        
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[chunkhash].'+Timestamp+'js'),
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Timestamp+'js')
  }
  

---

2. meta设置不缓存

在 index.html 文件添加如下代码

<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">