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中是会引起以上,提示的。
代码规范很重要。
本文地址:https://www.zhuimengzhu.com/details/455.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。