版本
- 文本：^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组件一次，我不会得到警告。如果我用两次，我就会得到它。
复制步骤
复制链接
- 安装一个新的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.
一些额外的钞票
- 我知道将整个事情封装在
<client-only>中可以解决问题，但我想了解为什么会发生这种情况，以便在未来的情况下避免这种情况 - 此外，如果我从
nuxt.config.js中删除components: true并再次正常导入组件，则警告将消失 - 更改组件的名称，例如
Button->TheButton无法解决问题。你可以在这里看到复制品
<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'
export default {
components: { Form, Button, Input}
}
</script>
似乎有一个或多个组件在"通用"；模式，即它们可能有在服务器端未正确执行的代码。
请尝试查找您认为可能导致问题的组件，并使用该组件进行包装。
以下是获取更多信息的链接：https://nuxtjs.org/docs/2.x/features/nuxt-components#the-仅客户端组件