客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

Question

版本

• nuxt：^2.14.12
• 节点：v14.15.4

复制

大家好，提前谢谢你们。 我有一个奇怪的问题，我真的不明白问题是什么以及如何处理它。 我已经安装了一个新的 nuxt ssr 项目。 我收到以下警告 [Vue warn]: 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.

我有三个简单的组件：Form、Input、Button。 Form.vue

<template>
  <form v-bind="$attrs" class="w-full" @submit.prevent="$emit('submitted')">
    <div class="space-y-2 mb-4">
      <slot name="fields" />
    </div>
      <slot name="button" />
    </div>
  </form>
</template>
<script>

export default {
  computed: {
    hasFields() {
      return !!this.$slots.fields
    },
  },
}
</script>

Input.vue

<template>
  <div class="relative w-full">
    <input class="form-input block w-full" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
}
</script>

Button.vue

<template>
  <button
    type="submit"
    class="relative btn inline-flex items-center justify-center transition ease-in-out duration-150"
  >
    Save
  </button>
</template>
<script>
export default {}
</script>

我在pages/index.vue 中使用我的组件，如下所示：

<template>
  <div>
    <Form>
      <template #fields>
        <Input />
        <Input />
      </template>
      <template #button>
        <Button />
      </template>
    </Form>
    <Form>
      <template #fields>
        <Input />
        <Input />
      </template>
      <template #button>
        <Button />
      </template>
    </Form>
  </div>
</template>

<script>
export default {}
</script>

如果我在视图中只使用一次Form 组件，我不会收到警告。 如果我使用它两次，我就会得到它。

重现步骤

Reproduction link

1. 安装一个新的 nuxt ssr 项目。
2. 在复制链接中创建组件

预期什么？

所有组件正常渲染，没有任何警告或错误。

实际发生了什么？

我收到以下警告。 [Vue warn]: 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.

一些额外说明

1. 我知道将整个内容包含在 <client-only> 中可以解决问题，但我想了解为什么会发生这种情况，以便在以后的情况下避免这种情况。
2. 此外，如果我从 nuxt.config.js 中删除 components: true 并再次正常导入组件，警告就会消失。
3. 更改组件的名称，例如Button -> TheButton 不会解决问题。你可以看到reproduction here。

<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'

export default {
  components: { Form, Button, Input}
}
</script>

Answer 1

似乎有一个或多个组件在“通用”模式下不受支持，即它们可能包含在服务器端未正确执行的代码。

请尝试查找您认为可能导致问题的组件并用 .

包装该组件

这里是更多信息的链接：https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component