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