vue項目強制清除頁面緩存的例子

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

今天小編就為大家分享一篇vue項目強制清除頁面緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

異常描述：

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

解決方案：

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

但在瀏覽器中，默認(rèn)會對 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>

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

我的最終解決方案是：

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

2）對html文件，返回時增加頭：Cache-Control，必須每次來服務(wù)端校驗，根據(jù)etag返回200或者304

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

upstream example-be {
　　ip_hash;
　　server unix:/run/example-be.sock;
}
server{
　　listen 80; #監(jiān)聽端口
　　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;
　 }

　　# 前端靜態(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)文件的時間不可控，我們可以在nginx上自己配置expires 1M（1個月）

# 前端靜態(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項目強制清除頁面緩存的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: