Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することがよくあります。ここでは、プロジェクトのキャッシュを無効にする実際の方法を説明します。

1. publicフォルダ内のindex.htmlファイルのメタ設定を変更する

画像.png

    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache、no-store、must-revalidate" />
    <meta http-equiv="有効期限" content="0" />

2.vue cli ビルド構成 (vue3 未満のバージョンの場合)

vue.config.js に設定を追加する

const タイムスタンプ = 新しい Date().getTime()
モジュール.エクスポート = {
  Webpack を構成する: {
    output: { // 再構築、パッケージ化、コンパイル後のファイル名を出力します [モジュール名。バージョン番号(オプション)。タイムスタンプ]
      ファイル名: `[name].${Timestamp}.js`,
      チャンクファイル名: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // パッケージ化後にCSSファイル名にタイムスタンプを追加します。ファイル名: `css/[name].${Timestamp}.css`,
      チャンクファイル名: `css/[name].${Timestamp}.css`
    }
  },
}

3. Nginxの設定

nginx キャッシュを無効にして、ブラウザでキャッシュされたファイルを読み取るのではなく、ブラウザが毎回サーバーにファイルを要求できるようにします。

プログラムをデバッグして起動した後、nginx キャッシュを有効にして、サーバーの帯域幅を節約し、一部のリクエストを減らし、サーバーの負荷を軽減できます。

画像.png

nginx.confファイル内のHTMLファイルを設定して、デフォルトでヘッダーを追加し、設定をキャッシュしないようにします。

次の実際のプロジェクトのnginxキャッシュ構成

  場所 ~ .*\.(?:htm|html)$ {
    add_header Cache-Control "private、no-store、no-cache、must-revalidate、proxy-revalidate";
  }

Nginx 静的リソース キャッシュ設定 https://www.jb51.net/article/222620.htm

これで、vue プロジェクトでブラウザ キャッシュ設定を無効にするケースに関するこの記事は終了です。vue プロジェクトでブラウザ キャッシュ設定を無効にすることに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。
  • WeChat ブラウザのサイトエントリファイルのキャッシュの問題を解決する (IIS は Vue プロジェクトを展開します)
  • Vue サーバーサイドレンダリングブラウザキャッシュ (キープアライブ) の詳細な説明

<<:  MySql のサブクエリ内のクエリ例の詳細な説明

>>:  Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

推薦する

フロントエンド制作に関する簡単な議論: 互換性のために IE6 はまだ必要ですか?

国内市場ではIE6~7のサポートに対する一定の需要がまだありますが、フロントエンド開発者として、私た...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

HTML 画像 img にハイパーリンクを追加した後の醜い青い境界線の問題を解決する

HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...

JavaScript フロー制御 (ループ)

目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...

vagrant+virtualBoxで仮想マシンを構築する方法

1. はじめにVagrant は、仮想マシン (VirtualBox) を構築および管理するためのツ...

Vueブラウザが監視を再開するための具体的な手順

序文ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問...

Linux デスクトップ用の 4 つのスキャン ツール

ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

MySQL で特定の親行のすべての子行を見つけるソリューション

序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...