我正在为我的应用程序使用 Nuxt.js / Vuejs，但我在不同的地方一直面临这个错误：
The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>.
Bailing hydration and performing full client-side render.
我想了解调试此错误的最佳方法是什么？他们是我可以记录/获取客户端和服务器的虚拟 DOM 树的一种方式，以便我可以比较并找出错误所在？
我的是一个大型应用程序，手动验证很困难。
部分答案：使用 Chrome DevTools，您可以本地化问题并查看导致问题的确切因素。执行以下操作（我使用 Nuxt 5.6.0 和 Chrome 64.0.3282.186 执行此操作）
msg变量上来检查消息。 hydrate在执行行上方 4 行的函数调用上patch。源的超链接hydrate将打开。hydrate函数中，从开始处移动大约 15 行，并在false返回后assertNodeMatch返回的位置设置断点false。在那里设置断点并删除所有其他断点。hydrate函数中停止。切换到 DevTools 控制台并评估elm，然后vnode. 这里 elm 似乎是一个服务器渲染的 DOM 元素，而 vnode 是一个虚拟 DOM 节点。Elm 打印为 HTML，因此您可以找出错误发生的位置。对我来说，这个错误发生了，因为获取数组列表AsyncData并渲染<tr>标签v-for，我把v-for代码放在<client-only>块中，问题解决了
这个错误调试起来真的很痛苦。为了快速获取导致问题的元素，请编辑node_modules/vue/dist/vue.esm.js并添加以下行：
// Search for this line:
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
var i;
var tag = vnode.tag;
var data = vnode.data;
var children = vnode.children;
inVPre = inVPre || (data && data.pre);
vnode.elm = elm;
// Add the following lines:
console.log('elm', elm)
console.log('vnode', vnode)
console.log('inVpre', inVPre)
// ...
您将在控制台中获得故障节点。
2.14.0在实现vue-particles包时，我遇到了与 nuxt 版本相同的问题。解决方法是用 包围标签no-ssr并解决了问题。
编辑：
解决方案的更新变体（如果 Nuxt 版本高于2.9.0）
<client-only>
<vue-particles>
</vue-particles>
</client-only>
旧解决方案：
<no-ssr>
<vue-particles>
</vue-particles>
</no-ssr>
有很多方法可以解决这个问题，但其中大多数都不是真正的修复，只是临时用的创可贴。注意几点：
<client-only>标签，有些提防重要的细节寿v-show而不是 av-if我强烈推荐阅读亚历山大·利希特 (Alexander Lichter) 撰写的这篇精彩文章
他会向您解释，您应该诊断为什么会发生这种情况并解决实际问题。
基本上，每次与服务器上生成的内容不同时，以及在客户端上完成补水后可用的内容都会导致此错误。
其中一些是：
<p>，a嵌套在另一个中的标签也是如此，等等......）new Date()例如）我强烈建议您阅读这篇文章，用 Alexandre 自己的话了解如何处理此类问题。如果您赶时间，您可以随时使用创可贴修复，但尝试实际修复问题以获得最佳性能并保持代码清洁。