这篇文章主要给大家分享的是Vue中的入口缓存问题,一些朋友可能遇到html文件被缓存的情况不知道怎样解决,下面小编就和大家一起来探讨看看。
在开发时候经常遇到一个问题,我们根据版本号去控制缓存问题,当我们发布新版本,使用新的版本号的时候,发现html
里面引用的版本号却是旧的版本号 ,原来是该html文件被缓存了,很多时候我们设置禁止html
文件被缓存,但依然会出现被缓存的情况。
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-control" content="no-cache" /> <meta http-equiv="Cache" content="no-cache" />
为什么我们有时候设置了<meta http-equiv=”Cache-control”content=”no-store”>
这种强制性禁止缓存,我们的页面依然被缓存了?
因为我们只关注了客户端,却忽略了服务器端的设置,如果服务器端nginx设置了Cache-control
,他是会覆盖掉我们页面中设置的的Cache-control
的,所以有时候我们会发现明明css
和js
已经加了版本号,但是html文件里面引用的依然是旧的css
和js
文件
一旦我们使用了全量更新,也就是每次发版本之前会干掉之前的js
和css
文件,那么index.html
会无法加载之前的js
,css
还有一些其他的静态资源文件,而新的js
和css
则不会被加载, 那么白屏就诞生了。
因为服务器的缓存机制,旧的css
和js
并不会被立即删除,这种情况下, 需要配合服务器来设置缓存,以nginx
为例
location / { root /home/www/test/dist; index index.html; try_files $uri $uri/ /index.html; add_header Last-Modified $date_gmt; add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; if_modified_since off; expires off; etag off; }
no-cache,no-store
可以只设置一个
no-cache
浏览器会缓存,但刷新页面或者重新打开时会请求服务器,服务器可以响应304
,如果文件有改动就会响应200
no-store
浏览器不缓存,刷新页面需要重新下载页
关于Vue入口缓存问题的解决方法就介绍到这了,希望能对大家有帮助,想要了解更多Vue框架中缓存的知识,请关注群英网络其它相关文章。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595