Vue のエントリ キャッシュの問題 (コード共有) の簡単な分析

前回の記事「知っておきたいHTTPキャッシュの仕組み（詳細コード解説）」では、HTTPキャッシュの仕組みについて学びました。次の記事は、Vue のエントリ キャッシュの問題を理解するのに役立ちます。見てみましょう。

webのキャッシュ戦略については、次の記事をお勧めします:Http Cache Mechanism

開発中に問題が発生することがよくあります。バージョン番号に基づいてキャッシュの問題を制御します。新しいバージョンをリリースしてバージョン番号を使用すると、htmlで囲まれたバージョン番号が古いバージョンであることがわかります。 #htmlファイルがキャッシュされることを禁止するように何度も設定しましたが、それでもキャッシュされてしまうことがあります。

を設定するのですか?この種のキャッシュの強制禁止は、私たちのページでもまだ行われています。キャッシュされた？

Cache-controlを設定すると、ページ上の ## 設定が上書きされます。 #Cache-controlのため、cssとjsのバージョン番号が追加されていることがわかりますが、古いは依然として HTML ファイル内で参照されています。 .cssおよびjsファイル完全更新を使用すると、つまり、以前の

とcss# は各バージョンの前に削除されます。 ## ファイルがリリースされた場合、index.htmlは以前のjs、cssおよびその他の静的リソース ファイルをロードできなくなり、新しいjsとcssは読み込まれず、白い画面が表示されます。サーバーのキャッシュ機構により、古いcss

jsはすぐには削除されません。この場合、サーバーと連携して削除する必要があります。キャッシュを次のように設定しますnginx例

location / { root /home/www/test/dist; index index.html; try_files $uri $uri/ /index.html; add_header Last-Modified $date_gmt; add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; if_modified_since off; expires off; etag off; }

no-キャッシュ

304に応答できます。ファイルが変更された場合は、200## に応答します。no-storeブラウザはキャッシュしないため、ページを更新するにはページを再ダウンロードする必要があります

推奨される学習:vue.js チュートリアル

以上がVue のエントリ キャッシュの問題 (コード共有) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。