Vue SPA 如何解决浏览器缓存问题_vue.js_

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每次打开页面都及时更新了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！