nuxt js“无法在'节点'上执行'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 buildthenpm2 start yarn -- start 图像在服务器上出错：服务器上出错

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

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

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

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

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

Answer 1

就我而言，当我想使用 vuex 持久库时发生此错误。

这个答案对我帮助很大，但我不知道哪些元素导致了错误，所以我最终将整个应用程序包装在其中，它就工作了！

// ~/layouts/default.vue
<template>
  <v-app v-if="!loading">
    ...
  </v-app>
</template>

<script>
export default {
  data: () => ({
    loading: true
  }),
  created() {
    this.$nextTick(function() {
      this.loading = false
    })
  }
}
</script>

Answer 2

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

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

就我而言，我v-if在模板中有一些节点，并将其替换为v-show将元素保留在 DOM 中，并帮助解决像这样的缺失节点错误。

Answer 3

如果您使用asyncData将模板的部分呈现在<client-only>标签中，如果您添加代码，人们可以更好地帮助您