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は継続サインイン機能を実装しており、サインイン後1日経過すると最初から開始します(SQL文)

1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...

さまざまなブラウザでのhrタグの説明

通常、人事担当者と会うことはめったにありませんが、一度会うと、それが生死を分けることもあります。 H...

mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)

目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...

WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...

ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。...

角度コンテンツ投影の詳細な説明

目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...

MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...

私が良いと思うクールなデザインサイトをいくつかまとめてみました。

ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません

MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...

insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する

この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...

MySQL データベースの 1045 エラーの解決方法

ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...