nuxt js&quot；无法在&#39；节点&#39；上执行&#39；appendChild&#39；：此节点类型在移动视图端口上不支持此方法&q； [英] nuxt js "Failed to execute 'appendChild' on 'Node': This node type does not support this method" on mobile view port

问题描述

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

本地计算机错误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使用pm2运行我的nuxtjs应用程序的服务器上出错 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.

这两个错误发生在同一方案中。

当我在桌面视口上运行它时，然后切换到移动视口(无需重新加载页面)，它运行得很好。但如果我将其重新加载到移动视口，则会出现这些错误。

不确定我应该共享哪个页面，因为此错误发生在所有页面上，即使在nuxt+vutify默认主页上也是如此。

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

推荐答案

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

尝试将其更改为v-show，因为v-show呈现HTML并将display属性设置为true或false，而v-if不呈现(真实conditional rendering)。

在我的示例中，我将v-if放在模板中的一些节点上，并将其替换为v-show将元素保留在DOM中，并帮助丢失节点错误，如下所示。

这篇关于nuxt js&quot；无法在&#39；节点&#39；上执行&#39；appendChild&#39；：此节点类型在移动视图端口上不支持此方法&q；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！