Heim >Web-Frontend >js-Tutorial >Warum sind Navigator, Fenster und Dokument in meiner Nuxt-App nicht definiert?
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
<template> <div> <p>Rendered on both: server + client</p> <client-only> <p>Rendered only on client</p> </client-only> </div> </template>
Zusätzliche Tipps
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!