Pourquoi est-ce que j'obtiens des erreurs « navigateur/fenêtre/document non défini » dans mon application Nuxt ?

Navigation des erreurs non définies dans Nuxt : résolution de "le navigateur/fenêtre/document n'est pas défini"

Dans les applications Nuxt, les développeurs rencontrent souvent des problèmes lorsqu'ils tentent pour accéder à certaines variables globales telles que « navigateur », « fenêtre » ou « document ». Cela peut se produire lors de l'exécution de code JavaScript qui repose sur ces variables.

Pour résoudre ce problème, il est important de comprendre que les applications Nuxt utilisent le rendu côté serveur (SSR), qui génère du HTML sur le serveur avant de l'envoyer à le client. Les variables globales ne sont pas disponibles pendant SSR car elles ne sont disponibles que dans l'environnement du navigateur.

Pour accéder à ces variables globales dans Nuxt, il est nécessaire d'utiliser une approche côté client uniquement :

Enveloppez la logique côté client dans "if (process.client) { ... }":

Enveloppez votre code JS dans une condition "if (process.client)". Cela garantira que le code s'exécute uniquement côté client, où ces variables globales sont disponibles :

export default {
  mounted() {
    if (process.client) {
      console.log(navigator.userAgent);
    }
  },
};

Utilisez "":

Enveloppez les composants qui ne doivent être rendus que côté client avec "":

<template>
  <div>
    <p>This will be rendered on both server and client.</p>
    
    <client-only>
      <p>This will only be rendered on client.</p>
    </client-only>
  </div>
</template>

Importer dynamiquement des bibliothèques pour SSR :

Certains les bibliothèques peuvent ne pas prendre en charge SSR. Pour les utiliser, importez-les conditionnellement à l'aide de l'importation dynamique :

export default {
  components: {
    [process.client && 'MyComponent']: () => import('./MyComponent.vue'),
  }
};

Importation directe :

Pour les composants destinés uniquement à être utilisés côté client, vous peuvent les importer directement comme ceci :

export default {
  components: {
    'MyComponent': () => import('./MyComponent.vue'),
  }
};

En suivant ces approches, les développeurs peuvent accéder et manipuler avec succès des variables globales telles que « navigateur », « fenêtre » et « document » dans leurs applications Nuxt.

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!