nuxt.js客户端呈现的虚拟DOM树与服务器呈现的内容不匹配
文章 649 0 0 0
发布时间:2021年10月15日

概述

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中是会引起以上,提示的。
代码规范很重要。

评论专区
Q群
Q群
Q群
反馈
纠错