解决vue多次打包后出现浏览器缓存的问题

解决vue多次打包后出现浏览器缓存的问题

每次打包更新版本上传到服务器上,会偶尔出现代码没有更新还是旧代码的逻辑,这就代表浏览器存在缓存的问题了。

解决方案

vue-cli2

webpack .prod.conf.js 下修改output


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')
}

vue-cli3

vue.config.js 下修改/添加output


const  Timestamp = new Date().getTime();

configureWebpack: {
    
    
	output: {
    
     
	   filename: 'js/[name].'+Timestamp+'.js',
	   chunkFilename: 'js/[name].'+Timestamp+'.js'
	}
}

结束

接下来就是打包好,就会发现打包出来的文件都有哈希值啦,就不会出现缓存问题啦,保证每次都是最新的。

猜你喜欢

转载自blog.csdn.net/weixin_41891519/article/details/114582874