The client-side rendered virtual DOM tree is not matching server-rendered content（已解决）

最新推荐文章于 2025-06-30 23:13:49 发布

IICOOM

最新推荐文章于 2025-06-30 23:13:49 发布

阅读量923

点赞数

CC 4.0 BY-SA版权

分类专栏： nuxt3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/IICOOM/article/details/129935949

nuxt3 专栏收录该内容

3 篇文章

订阅专栏

在使用Nuxt.js或Vue.js时可能会遇到一个警告：[Vuewarn]客户端渲染的虚拟DOM树与服务端渲染的内容不匹配。这个问题涉及到Bailinghydration过程，即Vue从服务器接管静态HTML并转化为响应式数据。解决方案是在动态组件如el-dialog外层添加ClientOnly标签。文章提供了一个具体的代码示例，展示了如何通过添加ClientOnly来消除错误。

使用nuxt.js或者vue.js有时会出现下面的报错：[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content

在这里插入图片描述
浏览器端渲染的DOM树与服务端不匹配。

什么是Bailing hydration?

Vue从服务端接管静态的HTML文件并且把它转换为响应式数据的过程。

如何解决报错？

报错的源代码：

<template>
  <div v-show="!is_mobile" class="align_center">
    <span class="theme_btn" @click="dialogVisible = true">打赏</span>
    <el-dialog
        title="感谢你的支持"
        v-model="dialogVisible"
        width="40%"
        center
        draggable
      >
        <el-row :gutter="20">
          <el-col :span="12" style="text-align: center">
            <img src="~assets/images/wechat.jpeg" alt="wechat">
            <span style="display: block">微信</span>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <img src="~assets/images/alipay.jpeg" alt="wechat">
            <span style="display: block">支付宝</span>
          </el-col>
        </el-row>
      </el-dialog>
  </div>
</template>

原因就是这个渲染过程中导致了服务端和客户端不一样，如果你正在用Nuxt.js，那么使用包裹el-dialog即可解决问题。

<template>
  <div v-show="!is_mobile" class="align_center">
    <span class="theme_btn" @click="dialogVisible = true">打赏</span>
    <ClientOnly>
      <el-dialog
        title="感谢你的支持"
        v-model="dialogVisible"
        width="40%"
        center
        draggable
      >
        <el-row :gutter="20">
          <el-col :span="12" style="text-align: center">
            <img src="~assets/images/wechat.jpeg" alt="wechat">
            <span style="display: block">微信</span>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <img src="~assets/images/alipay.jpeg" alt="wechat">
            <span style="display: block">支付宝</span>
          </el-col>
        </el-row>
      </el-dialog>
    </ClientOnly>
  </div>
</template>

报错消失。