nuxt js“无法在'Node'上执行'appendChild'：此节点类型不支持此方法”在移动视口上

Question

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

本地机器 映像错误：本地机器错误：

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 :08-237 服务器图像错误

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

这两个错误都发生在同一场景中。

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

不确定我应该分享哪个页面，因为这个错误发生在所有页面上，甚至在 nuxt+vuetify 默认主页上也是如此。

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

原文由 fachrilinggo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

检查您是否正在使用 v-if 指令

尝试将其更改为 v-show 因为 v-show 呈现 HTML 并将显示属性设置为 true 或 false，而 v-if 条件呈现 不呈现。

在我的例子中，我在我的模板中的一些节点上有 v-if 并将其替换为 v-show 将元素保留在 DOM 中并帮助丢失这样的节点错误。

原文由 Kostadin Terziev 发布，翻译遵循 CC BY-SA 4.0 许可协议