Pourquoi le navigateur, la fenêtre et le document ne sont-ils pas définis dans l'application My Nuxt ?

Comment résoudre une erreur non définie sur le navigateur/la fenêtre/le document dans Nuxt

Lors de la tentative de récupération d'informations sur l'agent utilisateur ou la rétine dans une application Nuxt , des erreurs peuvent survenir indiquant que le navigateur, la fenêtre ou le document ne sont pas définis. Cela se produit en raison de l'exécution de code JavaScript lors du rendu côté serveur (SSR), qui n'a pas accès aux objets spécifiques au navigateur comme la fenêtre ou le navigateur.

Solution

Pour résolvez ce problème, enveloppez votre code logique JS dans la construction suivante :

<script>
  import { jsPlumb } from 'jsplumb'

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

Cela garantit que votre code s'exécute uniquement côté client, où ces objets sont disponible. En outre, envisagez d'utiliser l'option pour afficher des sections spécifiques uniquement sur le client.

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

Conseils supplémentaires

• Consultez la documentation de la bibliothèque pour connaître la prise en charge SSR. Si cela n'est pas pris en charge, utilisez l'importation dynamique ou l'importation directe.

• Par exemple :

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

  En utilisant ces techniques, vous pouvez accéder aux objets de navigateur, de fenêtre et de document dans les applications Nuxt et résoudre les erreurs non définies rencontrées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!