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

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

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

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

1. 在Chrome（F12）中显示DevTools
2. 加载导致“客户端呈现的虚拟DOM树...”警告的页面。
3. 滚动到DevTools控制台中的警告。
4. 单击警告的源位置超链接（在我的情况下是vue.runtime.esm.js：574）。
5. 在此处设置一个断点（在源代码浏览器中的行号上单击鼠标左键）。
6. 做出同样的警告再次出现。我并不是说总是有可能的，但就我而言，我只是重新加载了页面。如果有很多警告，可以通过将鼠标移到msg变量上来检查消息。
7. 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.
8. 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.
9. 再次发出相同的警告。现在，当遇到断点时，应该在hydrate函数中停止执行。切换到DevTools控制台elm，然后进行评估vnode。这里的elm似乎是服务器渲染的DOM元素，而vnode是虚拟的DOM节点。Elm以HTML格式打印，因此您可以找出错误发生的位置。

到目前为止，我发现还没有发现，当您使用jQuery之类的第三方程序包时（特别是），它们有时会将html标签注入到dom中。因此，Vue / Nuxt松开了dom树的跟踪并开始抱怨。

我遇到了同样的问题，过了一会儿，我删除了所有jQuery，并用Vuejs替换了jQuery功能，这些错误都消失了。

好的，这听起来很愚蠢。我尝试了大约15分钟的各种解决方案，例如重新启动服务器和删除.nuxt目录，但我懒得使用@ budden73的大脑力解决方案。最终为我工作的只是重启计算机，试一试。