Warum sind „Navigator', „Fenster' und „Dokument' in meiner Nuxt-Anwendung nicht definiert?

So adressieren Sie undefinierte Navigatoren/Fenster/Dokumente in Nuxt-Anwendungen

Einführung

In Bei Nuxt-Anwendungen kann der Zugriff auf globale Browservariablen wie Navigator, Fenster und Dokument manchmal zu undefinierten Fehlern führen. Dies liegt daran, dass das Nuxt-Framework serverseitiges Rendering (SSR) verwendet, bei dem Code zunächst auf dem Server ausgeführt wird, bevor er auf dem Client gerendert wird.

Lösung

Die Der Schlüssel zur Lösung dieses Problems besteht darin, browserabhängigen Code auf die Clientseite zu beschränken. Um dies zu erreichen, gibt es mehrere Strategien:

1. Bedingter Code-Wrapping

Verpacken Sie Ihren Code in eine if-Bedingung (process.client), um ihn nur auf der Clientseite auszuführen. Dadurch wird sichergestellt, dass der Code erst nach der SSR-Phase ausgeführt wird.

<script>
  export default {
    mounted() {
      if (process.client) {
        // Your JS code here
      }
    },
  }
</script>

2. Komponente

Erstellen Sie eine Komponente zum Umschließen von Elementen, die nur auf dem Client gerendert werden sollen. Dies verhindert, dass sie während der SSR ausgeführt werden.

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

3. Dynamische Importe

Wenn eine Bibliothek SSR nicht unterstützt, können Sie dynamische Importe verwenden. Dies verzögert das Laden der Bibliothek, bis es auf der Clientseite benötigt wird, und stellt sicher, dass es nicht während des SSR ausgeführt wird.

export default {
  components: {
    [process.client &&& 'VueEditor']: () => import('vue2-editor'),
  },
}

Hinweis:

• Wrapping Ihre Komponente in überspringt das Rendern, nicht die Ausführung.
• Einige Pakete erfordern möglicherweise eine zusätzliche Konfiguration, um ordnungsgemäß mit SSR zu funktionieren.

Das obige ist der detaillierte Inhalt vonWarum sind „Navigator', „Fenster' und „Dokument' in meiner Nuxt-Anwendung nicht definiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!