DOM树问题

A_Ghost

在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。
问题重现:
HTML代码:

<template>
  <div>
    <div>
        <p>其他内容</p>
    </div>
    提示: {{ tips || "暂无" }}
  </div>
</template>

会出现如下错误:

[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

意思是:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

原因:
没有使用正确的标签语法。导致客户端和服务端渲染出来的结果不一致

解决办法:
1,使用正确的标签语法

<div>提示: {{ tips || "暂无" }}</div>

2,使用<client-only>组件只在客户端进行渲染此段代码。

<client-only>
  <div>提示: {{ tips || "暂无" }}</div>
</client-only>
阅读 402

知道的越多,不知道的也就越多。

18 声望
4 粉丝
0 条评论

知道的越多,不知道的也就越多。

18 声望
4 粉丝
文章目录
宣传栏