Erreur Vuejs : l'arborescence DOM virtuelle rendue par le client ne correspond pas à celle rendue par le serveur

Question

J'utilise Nuxt.js/Vuejs dans mon application et je continue à recevoir cette erreur à différents endroits :

L'arborescence DOM virtuelle rendue côté client ne correspond pas au contenu rendu par le serveur.
Cela est probablement dû à un balisage HTML incorrect, par exemple l'imbrication d'éléments au niveau du bloc dans <p>, ou un <tbody> manquant.
Éliminer l'hydratation et effectuer un rendu complet côté client.

J'aimerais savoir quelle est la meilleure façon de déboguer cette erreur ? Est-ce un moyen de enregistrer/obtenir les arborescences DOM virtuelles du client et du serveur afin de pouvoir comparer et trouver où se trouve l'erreur ?

Mon application est volumineuse et la vérification manuelle est difficile.

Answer 1

Pour moi, cette erreur s'est produite car dans AsyncData 中获取数组列表并通过 v-for 渲染 标签，我把 块中的 >v-for codez et résolvez le problème

Answer 2

Réponse partielle : à l'aide de Chrome DevTools, vous pouvez localiser le problème et voir exactement quel élément en est la cause. Procédez comme suit (je l'ai fait en utilisant Nuxt 5.6.0 et Chrome 64.0.3282.186)

1. Afficher les outils de développement dans Chrome (F12)
2. Chargement d'une page qui entraîne un avertissement "Arborescence DOM virtuelle rendue côté client...".
3. Faites défiler jusqu'à l'avertissement dans la console DevTools.
4. Cliquez sur le lien hypertexte de l'emplacement source de l'avertissement (dans mon cas vue.runtime.esm.js:574).
5. Définissez-y un point d'arrêt (clic gauche sur le numéro de ligne dans le navigateur de code source).
6. Faites réapparaître le même avertissement. Je ne dis pas que c'est toujours possible, mais dans mon cas, je viens de recharger la page. S'il y a beaucoup d'avertissements, vous pouvez visualiser les messages en déplaçant votre souris sur la variable msg.
7. Lorsque vous trouvez le message et que vous vous arrêtez au point d'arrêt, regardez la pile d'appels. Cliquez sur le prochain frame appelé "patch" pour ouvrir son code source. Passez la souris sur le lien hypertexte patch 中执行行上方 4 行的 Hydro 函数调用上。将打开指向Hydratesource.
8. à enchanted 函数中，从开头移动大约 15 行，并设置一个断点，在 assertNodeMatch 返回后返回 false 假. Définissez-y un point d'arrêt et supprimez tous les autres points d'arrêt.
9. Même avertissement encore une fois. Désormais, lorsqu'un point d'arrêt est atteint, l'exécution devrait avoir lieu à enchanted 函数中停止。切换到 DevTools 控制台并评估 elm，然后评估 vnode. Ici, elm semble être un élément DOM rendu par le serveur et vnode est un nœud DOM virtuel. Elm imprime au format HTML afin que vous puissiez déterminer où l'erreur se produit.