关于html:DOM树问题

在我的项目遇到客户端 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>