Heim >Web-Frontend >js-Tutorial >Warum sind Navigator, Fenster und Dokument in meiner Nuxt-App nicht definiert?

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

DDD
DDDOriginal
2024-11-11 15:16:02647Durchsuche

Why Are Navigator, Window, and Document Undefined in My Nuxt App?

So beheben Sie undefinierte Fehler im Navigator/Fenster/Dokument in Nuxt

Beim Versuch, Benutzeragenten- oder Retina-Informationen innerhalb einer Nuxt-Anwendung abzurufen können Fehler auftreten, die darauf hinweisen, dass Navigator, Fenster oder Dokument nicht definiert sind. Dies liegt daran, dass während des serverseitigen Renderings (SSR) JavaScript-Code ausgeführt wird, der keinen Zugriff auf browserspezifische Objekte wie Fenster oder Navigator hat.

Lösung

An Um dieses Problem zu beheben, schließen Sie Ihren logischen JS-Code in das folgende Konstrukt ein:

<script>
  import { jsPlumb } from 'jsplumb'

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

Dadurch wird sichergestellt, dass Ihr Code nur auf der Clientseite ausgeführt wird, wo diese Objekte verfügbar sind. Erwägen Sie außerdem die Verwendung der Option Komponente zum Rendern bestimmter Abschnitte ausschließlich auf dem Client.

<template>
  <div>
    <p>Rendered on both: server + client</p>
    
    <client-only>
      <p>Rendered only on client</p>
    </client-only>
  </div>
</template>

Zusätzliche Tipps

  • Überprüfen Sie die Bibliotheksdokumentation auf SSR-Unterstützung. Wenn dies nicht unterstützt wird, verwenden Sie den dynamischen Import oder den direkten Import.
  • Zum Beispiel:

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

    Durch den Einsatz dieser Techniken können Sie auf Navigator-, Fenster- und Dokumentobjekte in Nuxt-Anwendungen zugreifen und Beheben Sie die aufgetretenen undefinierten Fehler.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn