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

使用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>

原因就是这个<el-dialog></el-dialog>渲染过程中导致了服务端和客户端不一样，如果你正在用Nuxt.js，那么使用<ClientOnly></ClientOnly>包裹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>

报错消失。