Vue|Vue SPA 如何解决浏览器缓存问题
目录
- Vue SPA 解决浏览器缓存
- Vue 微信浏览器缓存问题
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)$) {expires100d; # 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|Vue SPA 如何解决浏览器缓存问题】
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每次打开页面都及时更新了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- 网络安全|网络安全与网站安全及计算机安全(如何下载到各版本Kali Linux计算机操作系统)
- {调取该文章的TAG关键词}|如何用科技赋能法律?|厂长来了
- 【vue2 -> vue3 学习笔记】vue2 vue3 v-model 语法区别
- PHP开发API离不开签名验证,你是如何设计()
- Vue|Vue nextTick延迟回调获取更新后DOM机制详解
- 【即构教程】如何实现70%丢包下音视频的高可用-信令篇
- 笔记|如何在若依中做数据权限
- Spring系列|若依如何实现数据范围过滤的
- 如何管理好时间()
- 《人生论》如何培养小小的世界公民|《人生论》如何培养小小的世界公民 下