Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt

Beim Freigeben eines Projekts müssen Sie häufig den Cache leeren. Hier erfahren Sie, wie Sie den Cache für das Projekt deaktivieren.

1. Ändern Sie die Metakonfiguration der Datei index.html im öffentlichen Ordner

    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="Cache-Kontrolle" content="kein Cache, kein Speicher, muss erneut validiert werden" />
    <meta http-equiv="läuft ab" content="0" />

2.vue cli Build-Konfiguration (für Versionen unter vue3)

Konfiguration in vue.config.js hinzufügen

const Timestamp = neues Date().getTime()
modul.exporte = {
  konfigurierenWebpack: {
    Ausgabe: { // Gibt den Namen der Datei nach der Rekonstruktion, Verpackung und Kompilierung aus [Modulname. Versionsnummer (optional). Zeitstempel]
      Dateiname: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // Füge dem Namen der CSS-Datei nach dem Verpacken des Dateinamens einen Zeitstempel hinzu: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

3. Nginx-Konfiguration

Deaktivieren Sie den Nginx-Cache und lassen Sie den Browser jedes Mal Dateien vom Server anfordern, anstatt zwischengespeicherte Dateien im Browser zu lesen.

Nachdem das Programm debuggt und gestartet wurde, können Sie den Nginx-Cache aktivieren, um Serverbandbreite zu sparen, einige Anforderungen zu reduzieren und den Serverdruck zu verringern.

Konfigurieren Sie die HTML-Datei in der Datei nginx.conf so, dass standardmäßig ein Header hinzugefügt wird und die Konfiguration nicht zwischengespeichert wird

Die folgende tatsächliche Projekt-Nginx-Cache-Konfiguration

  Standort ~ .*\.(?:htm|html)$ {
    add_header Cache-Control "privat, kein Speichern, kein Cache, muss erneut validiert werden, Proxy-Erneutvalidierung";
  }

Nginx-Einstellungen für den statischen Ressourcencache https://www.jb51.net/article/222620.htm

Dies ist das Ende dieses Artikels über das Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt. Weitere relevante Inhalte zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!