Vuejs 错误：客户端渲染的虚拟 DOM 树与服务器渲染的不匹配

Question

我正在为我的应用程序使用 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 树以便我可以比较并找到错误所在的一种方式吗？

我的应用程序很大，手动验证很困难。

原文由 asanas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

部分答案：使用 Chrome DevTools，您可以本地化问题并准确查看导致问题的元素。执行以下操作（我使用 Nuxt 5.6.0 和 Chrome 64.0.3282.186 执行此操作）

1. 在 Chrome 中显示 DevTools (F12)
2. 加载导致“客户端呈现的虚拟 DOM 树…”警告的页面。
3. 滚动到 DevTools 控制台中的警告。
4. 单击警告的源位置超链接（在我的例子中是 vue.runtime.esm.js:574）。
5. 在那里设置一个断点（在源代码浏览器中左键单击行号）。
6. 使相同的警告再次出现。我并不是说这总是可能的，但就我而言，我只是重新加载了页面。如果有很多警告，您可以通过将鼠标移到 msg 变量上来检查消息。
7. 当您找到您的消息并在断点处停止时，请查看调用堆栈。向下单击一帧以调用“补丁”以打开其源代码。将鼠标悬停在 hydrate 函数调用 patch 中的执行行上方 4 行。指向 hydrate 源的超链接将打开。
8. In the hydrate function, move about 15 lines from the start and set a breakpoint where false is returned after assertNodeMatch returned false .在那里设置断点并删除所有其他断点。
9. 让同样的警告再次发生。现在，当断点被命中时，执行应该在 hydrate 函数中停止。切换到 DevTools 控制台并评估 elm 然后 vnode 。这里 elm 似乎是一个服务器渲染的 DOM 元素，而 vnode 是一个虚拟 DOM 节点。 Elm 打印为 HTML，因此您可以找出错误发生的位置。

原文由 budden73 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对我来说，发生此错误是因为在 AsyncData 中获取数组列表并渲染 <tr> 标签由 v-for ，我把 v-for 代码放在 <client-only> 29358d9757a566a 中 --- 块和问题已解决

原文由 Mohsen 发布，翻译遵循 CC BY-SA 4.0 许可协议