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

JavaScript Vue.js

LGil

2020-03-20

我正在为Numy应用程序使用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树的方法，以便我可以比较并查找错误的出处吗？

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

第2544篇《Vuejs错误：客户端渲染的虚拟DOM树与服务器渲染的不匹配》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

猿樱 2020.03.20

有关如何处理修改DOM的集成（例如Google Analytics（分析）或FB Pixel）的示例，请参见此处。基本上创建一个插件，并从SSR中排除。

https://nuxtjs.org/faq/google-analytics/

Tony伽罗米亚 2020.03.20

部分答案：使用Chrome DevTools，您可以将问题本地化，并确切查看是什么因素导致了问题。执行以下操作（我使用Nuxt 5.6.0和Chrome 64.0.3282.186进行了此操作）

在Chrome（F12）中显示DevTools
加载导致“客户端呈现的虚拟DOM树...”警告的页面。
滚动到DevTools控制台中的警告。
单击警告的源位置超链接（在我的情况下是vue.runtime.esm.js：574）。
在此处设置一个断点（在源代码浏览器中的行号上单击鼠标左键）。
做出同样的警告再次出现。我并不是说总是有可能的，但就我而言，我只是重新加载了页面。如果有很多警告，可以通过将鼠标移到msg变量上来检查消息。
When you found your message and stopped on a breakpoint, look at the call stack. Click one frame down to call to "patch" to open its source. Hover mouse over hydrate function call 4 lines above the execution line in patch. Hyperlink to the source of hydrate would open.
In the hydrate function, move about 15 lines from the start and set a breakpoint where false is returned after assertNodeMatch returned false. Set the breakpoint there and remove all other breakpoints.
再次发出相同的警告。现在，当遇到断点时，应该在hydrate函数中停止执行。切换到DevTools控制台elm，然后进行评估vnode。这里的elm似乎是服务器渲染的DOM元素，而vnode是虚拟的DOM节点。Elm以HTML格式打印，因此您可以找出错误发生的位置。