uniapp APP使用web-view内嵌 h5 解决打包发版浏览器有缓存需要清除的问题
1.在当前项目根节点下的public目录下的index.html里面写入禁止缓存的 meta
<!-- 解决前端发版缓存问题 start -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="Cache" content="no-cache">
<!-- 解决前端发版缓存问题 end -->
2.配置服务器,使得index.html等关键文件不被缓存。例如,使用Nginx配置,可以添加以下指令:
location=/index.html {
add_header Cache-Control "no-cache, no-store";
}
3.在对应的响应拦截器中请求头里添加上“Cache-Control”设置为“no-cache”告诉浏览器不缓存
axios.defaults.headers["Cache-Control"] = "no-cache";
4.在vue.config配置webpack,让打包的时候给对应的js、css文件名后缀拼接上时间戳
const timeStamp= new Date().getTime()
module.exports = {
configureWebpack: {
output: {
filename: `js/[name].js?v=${timeStamp}`,
chunkFilename: `js/[name].js?v=${timeStamp}`,
},
},
css: {
// 输出重构 打包编译后的css文件名称,添加时间戳
extract: {
filename: `css/[name].${timeStamp}.css`,
chunkFilename: `css/[name].${timeStamp}.css`,
},
}
}
最后的打包效果,能看到css、js文件后缀都加上了时间戳