概述

nuxt.js客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在<p>中嵌套块级元素，或者缺少<tbody>。打捞水化并执行完整的客户端渲染,在控制台出现红色提示，布置到生产环境项目发生崩溃。

控制台错误提示

[Vue warn]: 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.

翻译：

[Vue warn]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在<p>中嵌套块级元素，或者缺少<tbody>。打捞水化并执行完整的客户端渲染,在控制台出现红色提示，布置到生产环境项目发生崩溃。

控制台：

原因一：

可能是p标签嵌套块级元素，例如我们在p中使用div,这是绝对不允许犯的错误，也可能是tbody标签或者其他标签没有闭合。
这就是书写不规范造成的错误。

原因二：

客户端呈现的虚拟DOM树与服务器呈现的内容不匹配，例如我们动态的改变了内容，造成服务端渲染跟浏览器渲染的不一致，也是会有这样的提示
这种动态编号标签我们一般使用nuxt提供的禁止服务端渲染标签

Nuxt 版本小于 v2.9.0 的用户<no-ssr>

Nuxt 版本大于 v2.9.0 的用户<client-only>

原因三：

有的时候我们会使用p标签来嵌套文本之类的内容，我们可能如下写

<p>
    <img src="图片"/>
    这是我们的内容。
</p>

这样的写法在nuxt中是会引起以上，提示的。
代码规范很重要。