Vue项⽬部署，解决js、css、img被缓存问题
@Tip：本⽂解决的只是index.html 中引⼊的js、css、img 等⽂件的缓存。但是 index.html 这个⽂件也可能会缓存。⽹上很多说：解决index.html 都是Nginx。⽬前博主使⽤的是Tomcat。我是⽤了⼀个Filter的⽅式来处理index.html 的缓存问题。刚上线2天，正在调试中，⽬前没收到任何关于缓存的问题。后续测试没问题会附上如何通过Filter⽅式 解决 index.html 缓存的⽅案。敬请期待。
⽂章已更新：
新加⽂章：
本⽂⽬录
前⾔
  部署前端项⽬以后，你会发现⼀个问题（为什么必须刷新页⾯，页⾯才会更新到最新版本），其实就是因为服务器缓存的问题，接下来我就以我⾃⼰所⽤的⽅案来解决⾃动清除缓存的问题。
⼀、根⽬录index.html
在head标签中，加⼊下⾯的代码
<meta http-equiv="pragram"content="no-cache">
nginx部署前端项目<meta http-equiv="cache-control"content="no-cache, no-store, must-revalidate">
⼆、配置fig.js
直接上代码【使⽤时间戳】
 代码如下（⽰例）：
const Version =new Date().getTime()
css:{
loaderOptions:{
sass:{
data:`@import "@/components/themes/_handle.scss";`
}
},
// 是否使⽤css分离插件 ExtractTextPlugin
extract:{
// 修改打包后css⽂件名  // css打包⽂件，添加时间戳
filename:`static/css/[name].${Version}.css`,// 此处static/css/xxx ⽬录根据⾃⼰打包情况来定，我使⽤的就没有static⼀层，所以直接去掉static即可。根据⾃⼰项⽬决定
chunkFilename:`static/css/[name].${Version}.css`
}
},
configureWebpack:{
output:{// 输出重构打包编译后的⽂件名称【模块名称.版本号.时间戳】
// filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
filename:`static/js/[name].${Version}.js`,// js打包⽂件，添加时间戳
chunkFilename:`static/js/[name].${Version}.js`
}
},
chainWebpack(config){
// img的⽂件名修改  // img打包⽂件，添加时间戳
.rule('images')
.use('url-loader')
.tap(options =>{
options.name =`static/img/[name].${Version}.[ext]`
options.fallback ={
loader:'file-loader',
options:{
name:`static/img/[name].${Version}.[ext]`
}
}
return options
})
}
}
三、最终效果
1.css打包后
2.img打包后
3.js打包后
总结
以上就是今天要讲的内容，有效的解决了部署以后⾃动更新缓存的问题，不需要在⼿动刷新页⾯去更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。