Vue SPA 如何解决浏览器缓存问题
更新时间：2022年08月03日 09:59:14 作者：前端@小菜
这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue SPA 解决浏览器缓存
如何让发布到线上的 vue 单页应用能及时更新到浏览器，而无需用户强制刷新页面呢？
因为 js、css、图片等资源文件名带有 hash 值，只要文件名变了就会更新，所以可以设置缓存，但 html 文件名没有加 hash 值，所以不能缓存该文件。
在 nginx.conf 中设置
location / {
root html/dist;
index index.html index.htm;
if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$) {
expires 100d; # js、css、图片缓存100天(因为文件名有hash)
#add_header Cache-Control "max-age = 8640000"; # 或者设置max-age
}
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "no-store"; # html不缓存(因为文件名没有加hash)
}
}通过上述配置，让浏览器不缓存 html 文件。
Vue 微信浏览器缓存问题
1.试过js、css打包时添加时间戳，因为打包后每次都是新名字的文件，所以感觉加不加时间戳都没有效果 试了一下果然
原因应该是微信浏览器缓存了index.html, 所以打开缓存的页面根本没有任何请求
2.试过index.html添加meta标签，设置不缓存页面，亲测也无效
3.index.html 试过添加参数，本以为微信浏览器会认为是一个新页面， 但是无果
4.js 间隔时间自动刷新window.location.href 体验不好，还是去掉了
5.既然前端试了很多种办法 还是无效，只能在服务端配置了，
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}这句话应该也是让index.html不缓存，尝试了下，这种办法没有兼容问题，安卓和ios每次打开页面都及时更新了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇axios全局请求参数设置,请求及返回拦截器的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了Vue调试神器vue-devtools安装方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了Vue分页器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue+elementui实现下拉表格多选和搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了element-plus的el-tree的双向绑定的示例代码,代码简单易懂,结合图文给大家展示,感兴趣的朋友跟随小编一起看看吧2024-12-12
Vue.js提供了简洁、易于理解的API，帮助大家快速灵活掌握Vue.js。这篇文章主要介绍了如何在60分钟内轻松学习Vue.js，感兴趣的小伙伴们可以参考一下2016-11-11
详解Vue+elementUI build打包部署后字体图标丢失问题
这篇文章主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要给大家介绍了关于Vue生命周期介绍和钩子函数的相关资料，对大家学习或者使用vue2具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧2021-10-10
Vue 3引入了两个新的API,ref和reactive,用于创建响应式对象,这两个方法都位于Vue.prototype上,因此可以在组件实例中直接使用,本文给大家介绍vue3使用ref和reactive的示例,感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论