Warum sind Navigator, Fenster und Dokument in Nuxt-Anwendungen nicht definiert?

So lösen Sie undefinierte Navigatoren, Fenster und Dokumente in Nuxt-Anwendungen auf

Einführung

Entwickler stoßen häufig auf Fehler, bei denen Navigator, Fenster und Dokument in Nuxt-Anwendungen undefiniert bleiben. Dieses Problem tritt auf, wenn versucht wird, auf browserbezogene Informationen wie UserAgent- oder Retina-Informationen zuzugreifen.

Lösung

Um dieses Problem zu beheben, binden Sie Ihren JavaScript-Code in bestimmte Strukturen ein Stellen Sie sicher, dass die ordnungsgemäße Ausführung nur auf der Client-Seite erfolgt.

Code mit Mounted()-Hook und process.client umschließen

<script>
import { jsPlumb } from 'jsplumb'; // client-side library only, no SSR support

export default {
  mounted() {
    if (process.client) {
      // your JS code here like >> jsPlumb.ready(function () {})
    }
  },
}
</script>

Nur ​​Client-Komponente verwenden

<template>
  <div>
    <p>this will be rendered on both: server + client</p>
    
    <client-only>
      <p>this one will only be rendered on client</p>
    </client-only>
  </div>
</template>

Umgang mit nicht unterstützten SSR-Paketen

Für Bibliotheken, die SSR beim Import nicht unterstützen, sollten Sie dynamische Importe oder direktes Laden in Betracht ziehen:

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

Zusätzliche Tipps

• Vermeiden Sie das Verpacken von Komponenten innerhalb von wenn Sie das Rendern nicht verhindern möchten.
• Dynamische Importe eignen sich für Bibliotheken, die später in der Anwendung verwendet werden.
• Weitere Anleitungen finden Sie in der offiziellen Nuxt-Dokumentation (https://nuxtjs. org/docs/2.x/features/nuxt-components/#the-client-only-component)

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