怎么在vue项目中强制清除页面缓存-创新互联

今天就跟大家聊聊有关怎么在vue项目中强制清除页面缓存，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

解决方案：

在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX， 前端才缓存。

但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：

浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。

我的最终解决方案是：

1） 对hash过的静态文件还是采用默认方式，客户端会缓存。

2）对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304

对应的nginx配置如下：

upstream example-be {
　　ip_hash;
　　server unix:/run/example-be.sock;
}
server{
　　listen 80; #监听端口
　　server_name example.com

　　# 后台api
　　location ~ ^/api {
　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　　　　include uwsgi_params;
　　　 uwsgi_pass example-be;
　 }

　　# 前端静态文件
　　location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
　　　　root /var/www/example-fe/dist/;
　　}

　　# 前端html文件
　　location / {
　　　　# disable cache html
　　　　add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';

　　　　root /var/www/example-fe/dist/;
　　　　index index.html index.htm;
　　　　try_files $uri /index.html;
　　}
}

由于浏览器缓存静态文件的时间不可控，我们可以在nginx上自己配置expires 1M（1个月）

# 前端静态文件

location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
 　　root /var/www/example-fe/dist/;
 　　expires 1M;
 　　add_header Cache-Control "public";
 }

看完上述内容，你们对怎么在vue项目中强制清除页面缓存有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。