Pourquoi « navigateur », « fenêtre » et « document » ne sont-ils pas définis dans mon application Nuxt ?

Comment gérer un navigateur/fenêtre/document non défini dans les applications Nuxt

Introduction

Dans Les applications Nuxt, accédant aux variables globales du navigateur telles que le navigateur, la fenêtre et le document, peuvent parfois entraîner des erreurs non définies. En effet, le framework Nuxt utilise le rendu côté serveur (SSR), où le code est initialement exécuté sur le serveur avant d'être restitué sur le client.

Solution

La La clé pour résoudre ce problème est de limiter le code dépendant du navigateur au côté client. Pour y parvenir, il existe plusieurs stratégies :

1. Conditional Code Wrapping

Enveloppez votre code dans une condition if (process.client) pour l'exécuter uniquement côté client. Cela garantit que le code n'est exécuté qu'après la phase SSR.

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

2. Composant

Créer un composant composant pour envelopper les éléments qui doivent être rendus uniquement sur le client. Cela empêche leur exécution pendant la SSR.

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

3. Importations dynamiques

Si une bibliothèque ne prend pas en charge SSR, vous pouvez utiliser les importations dynamiques. Cela retarde le chargement de la bibliothèque jusqu'à ce qu'elle soit nécessaire côté client, garantissant ainsi qu'elle ne sera pas exécutée pendant SSR.

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

Remarque :

• Enveloppement votre composant en mode ignore le rendu, pas l'exécution.
• Certains packages peuvent nécessiter une configuration supplémentaire pour fonctionner correctement avec SSR.

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!