javascript - nuxt js "Failed to execute ' appendChild' on 'Node' : This node type does not support this method"on mobile view port

Question

尝试运行我的 nuxtjs 时发现此错误带有 vuetify 的应用程序在移动视口(viewport)上，但一切都在桌面视口(viewport)上运行良好。

本地机器上的错误 image : error on local machine :
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.
使用 ubuntu 和 nginx 运行我的 nuxtjs 应用程序的服务器上的错误 pm2使用yarn build然后 pm2 start yarn -- start image : error on server
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
这两个错误都发生在同一场景中。

当我在桌面视口(viewport)上运行它时，然后切换到移动视口(viewport)(不重新加载页面)它运行良好。但是如果我在移动视口(viewport)上重新加载它，就会发生这些错误。

不确定我应该分享哪个页面，因为即使在 nuxt+vuetify 默认主页上，所有页面都会发生此错误。

目前在桌面视口(viewport)上也会出现同样的错误，但是通过将我的组件包装在 <client-only></client-only> 中来修复它，并且错误从桌面视口(viewport)消失，但仍然发生在移动视口(viewport)上。

Answer 1

检查您是否在使用 v-if指示
尝试将其更改为 v-show因为v-show呈现 HTML 并将 display 属性设置为 true 或 false，而 v-if不渲染(真正的 conditional rendering )。
就我而言，我有 v-if在我的模板中的一些节点上并将其替换为 v-show将元素保留在 DOM 中并帮助丢失这样的节点错误。