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

推薦する

Mac OS10.12 に mysql5.7.18 をインストールするチュートリアル

ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...

LinuxシステムでFuserコマンドを使用する方法

Fuser コマンドとは何ですか? fuser コマンドは、特定のファイル、ディレクトリ、またはソケ...

Linuxファイルシステム操作の実装

この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...

MySQL 8.0.13 zipパッケージのインストール方法について

MySQL 8.0.13 にはデフォルトでデータ フォルダがあります。このフォルダを削除する必要があ...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル MySQL 8.0 の新しいパスワード認証方法

この記事では、参考までにMySQL8.0.11のインストールと設定方法、およびMySQL8.0の新し...

Centos7 システムでの .NET Core 2.0 + Nginx + Supervisor 環境の構築

1. Linux .NET Core の紹介Microsoft は常に自社のプラットフォームに対して...

seata docker 高可用性デプロイメントの詳細な紹介

バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...

Linuxはjoin -a1を使用して2つのファイルを結合します

次の2つのファイルを結合するには、それらを結合して1.txtに結合します。 # 1.txt ジェリー...

mysql 8.0.19 winx64.zip インストール チュートリアル

この記事は参考までにmysql 8.0.19 winx64.zipのインストールチュートリアルを記録...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...

MySQL マスタースレーブレプリケーションの遅延の原因と解決策

目次レプリケーション ロジックの簡単な概要:遅延の原因と解決策〇メインデータベースへの頻繁なDMLリ...

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...