浅析Vue中入口缓存的问题（代码分享）

之前的文章《你值得了解的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;  活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看   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教程

本文来源网站：info110.com，若侵权，请联系删除。

《浅析Vue中入口缓存的问题（代码分享）》来自互联网同行内容，若有侵权，请联系我们删除！