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 のインストール方法 (グラフィカル チュートリアル)

推薦する

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...

React Nativeでaxiosを使用してネットワークリクエストを行う方法

フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...

MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)

1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...

RedisとMySQLの違いを簡単に説明してください

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

XHTML チュートリアル: 初心者のための XHTML の基礎

<br />当サイトのオリジナルコンテンツですので、転載の際は出典を123WORDPRE...

MySQL の char、varchar、text フィールド タイプの違い

MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

Ubuntu 16.04 で FTP サーバーを構築するチュートリアル

Ubuntu 16.04 FTP サーバーをビルドするftpをインストールするftp をインストール...

Nodejs でモジュール fs ファイルシステムを使用する方法

目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束​​の書き方...

変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード

序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...

Tomcat が非同期サーブレットを実装する方法の詳細な説明

序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

VMwareがLinuxシステムをインストールして起動した後に黒い画面が表示される問題を解決する

1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...