Element 组件渲染错误，Hydration children mismatch in <div>
来源：8-16 对SPA应用的第一次SSR改造：设置运行指令开启生产环境Node服务-2【下】
ZENKR
2022-12-26
老师好 我现在在改造ssr后，出现了一个问题。我使用了Element的Select组件和Popover组件，在文档里写着：在 SSR 场景下，您需要将组件包裹在 之中 (如: Nuxt) 和 SSG (e.g: VitePress).
可是并没有这个组件。
我又查，可以通过v-if判断客户端；或者动态import加载组件。但是我也不知道如何判断和操作。不知道是不是这个问题导致的。
写回答
1回答
-
Harry_wang
2022-12-28
之前vue3官网文档有讲过这个问题，现在文档地址找不到了。Anyway，这种报错是因为服务端渲染出来的DOM和客户端生成的虚拟DOM不匹配，element-plus的部分组件（比如el-menu或者你遇到的Select组件和Popover组件）对SSR支持不全面、不兼容，但是这个报错貌似并不会影响程序正常运行。
处理方案：
1）把某些SSR支持不好的组件，比如你遇到问题的Select组件和Popover组件，直接自己手写封装即可。
2）使用 mounted 钩子来区分客户端与服务端，比如定义个变量visible，mounted中设置为true，然后再 v-if 加载出来你遇到问题的Select组件和Popover组件，在服务端先不渲染该组件就会有这些警告提示了。
00
相似问题