vueプロジェクトが強制的にページキャッシュをクリアした例

2061 ワード

異常な説明:
お支払いの宝の中に埋め込まれているh 5プロジェクト（vueフレーム開発）は、フロントエンドを再パッケージしてアップロードした後、ページが空白になり、ページtabをクリックして異常な状況になります。手動でキャッシュをクリアする必要があります。正常にアクセスできます。
ソリューション:
HTTPプロトコルでは、バックエンドだけがexpiresまたはCache-Control:max-age=XXXに戻り、フロントエンドがキャッシュされる。
ただし、ブラウザでは、デフォルトでは、html css jsなどの静的ファイルおよびリダイレクトをキャッシュしています。

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

ブラウザはキャッシュできません。しかし、キャッシュをリダイレクトします。このような方式は規範ではなく、サポートしていないブラウザもあります。
私の最終解決策は：
1）hashが通過した静止ファイルに対して、またはデフォルトでキャッシュします。
2）htmlファイルに対して、返却時にヘッダを追加します。Cache-Coontrolは毎回実務検査に来て、ETagによって200または304に戻ります。
対応するinx構成は以下の通りである。


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;
　　}
}

ブラウザが静止ファイルをキャッシュする時間が制御できないので、inx上で自分でexpires 1 Mを設定することができます（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プロジェクトが強制的にページキャッシュをクリアした例は、小編集が皆さんに提供した内容の全てです。参考にしていただければと思います。よろしくお願いします。

一家の言葉の体験談php＋mysqlは着実に個人の基本的な仕事をしています。

php Unidefined indexとUnidefined variableの解決方法