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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下2020-02-02
vue實現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端H5數(shù)字鍵盤組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實現(xiàn)步驟
本文檔將介紹如何通過點擊父列表（表格）中的數(shù)據(jù)行來獲取到子列表（表格）的數(shù)據(jù),代碼示例是基于Vue框架實現(xiàn)的一個組件,包含了父列表和子列表,通過點擊父列表的數(shù)據(jù)行來動態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue項目利用axios請求接口下載excel，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個唯一標(biāo)識符作為ID時,可以使用Vue UUID插件,比如生成訂單號、用戶ID等等,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中@click如何綁定多個事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝
對整個系統(tǒng)來說，一般會有很多業(yè)務(wù)對象，而每個業(yè)務(wù)對象的API接口又有很多。我們這個VUE+Element 前端應(yīng)用就是針對ABP框架的業(yè)務(wù)對象，因此前端的業(yè)務(wù)對象接口也是比較統(tǒng)一的，那么可以考慮在前端中對后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡化。2021-05-05
給大家?guī)硪黄P(guān)于用nodejs實現(xiàn)excel文件的讀取并去重的功能，有興趣的朋友參考學(xué)習(xí)下。2018-04-04