Nuxt开发中The client-side rendered virtual DOM tree is not matching server-rendered content.的问题

【写在最前面，我的解决方法：用<client-only>把不必要的组件包裹起来】

公司的移动端由于要对SEO做出优化支持，所以项目从普通的Vue spa项目改造为Nuxt；

在改造过程中，发现有“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.”的报错，很迷茫

通过查询，知道了这是由于一些节点带来的错误，或者是因为在P标签里加入block的元素，或者是缺少了<tbody>；

但代码里是没有出现这种情况的，项目是用Vue +Vant制作的，排查以后发现，是某个组件里用了vany的<<van-icon />；

这种icon没有在服务器渲染的必要，完全可以在客户端渲染，所以用<client-only>把这个组件包裹起来，编译刷新，报错解除！

所以相关问题也可以考虑一下是否是因为类似的原因。

看看我的小程序吧：