vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子

更新時(shí)間：2019年11月06日 08:56:01 作者：逍遙云天

今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

異常描述：

支付寶中內(nèi)嵌h5項(xiàng)目（vue框架開(kāi)發(fā)），前端重新打包上傳之后訪問(wèn)頁(yè)面會(huì)導(dǎo)致頁(yè)面空白、頁(yè)面tab點(diǎn)擊異常之類異常情況，需要手動(dòng)清除支付寶緩存才可以正常訪問(wèn)。

解決方案：

在HTTP協(xié)議中，只有后端返回 expires 或 Cache-Control:max-age=XXX，前端才緩存。

但在瀏覽器中，默認(rèn)會(huì)對(duì) html css js 等靜態(tài)文件、以及重定向進(jìn)行緩存，如果在HEAD頭中指定：

<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>

瀏覽器不會(huì)緩存html，但是還是會(huì)對(duì)重定向緩存，并且這種方式并不規(guī)范，可能有的瀏覽器不支持。

我的最終解決方案是：

1）對(duì)hash過(guò)的靜態(tài)文件還是采用默認(rèn)方式，客戶端會(huì)緩存。

2）對(duì)html文件，返回時(shí)增加頭：Cache-Control，必須每次來(lái)服務(wù)端校驗(yàn)，根據(jù)etag返回200或者304

對(duì)應(yīng)的nginx配置如下：

upstream example-be {
　　ip_hash;
　　server unix:/run/example-be.sock;
}
server{
　　listen 80; #監(jiān)聽(tīng)端口
　　server_name example.com

　　# 后臺(tái)api
　　location ~ ^/api {
　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　　　　include uwsgi_params;
　　　 uwsgi_pass example-be;
　 }

　　# 前端靜態(tài)文件
　　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;
　　}
}

由于瀏覽器緩存靜態(tài)文件的時(shí)間不可控，我們可以在nginx上自己配置expires 1M（1個(gè)月）

# 前端靜態(tài)文件

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項(xiàng)目強(qiáng)制清除頁(yè)面緩存的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: