之前的文章《你值得了解的HTTP缓存机制（代码详解）》中，给大家了解了HTTP缓存机制。下面本篇文章给大家了解Vue中入口缓存的问题，伙伴们来看看吧。
关于web的缓存策略,推荐这篇文章：Http缓存机制
在开发时候经常遇到一个问题，我们根据版本号去控制缓存问题，当我们发布新版本，使用心得版本号的时候，发现html里面引用的版本号却是旧的版本号 ，原来是该html文件被缓存了，很多时候我们设置禁止html文件被缓存,但依然会出现被缓存的情况。
登录后复制
为什么我们有时候设置了这种强制性禁止缓存,我们的页面依然被缓存了？
因为我们只关注了客户端，却忽略了服务器端的设置，如果服务器端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.js教程
以上就是浅析Vue中入口缓存的问题（代码分享）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3020019.html
