在nuxt引入element插件，報錯，The client-side rendered virtual DOM tree is not matching server-rendered content

在nuxt引入element插件，報錯，

 

 翻譯：[Vue warn]：客戶端呈現的虛擬DOM樹與服務器呈現的內容不匹配。這可能是由於不正確的HTML標記造成的，例如在<p>中嵌套塊級元素，或者缺少<tbody>

上圖中出現的這個問題是element-ui沒有允許在服務端使用導致的。

在這element-ui組件最外層加上<client-only>組件，該組件只是占位且用於僅在客戶端渲染其他組件.

官網：https://www.nuxtjs.cn/api/components-client-only

<template>
  <client-only>
    <el-container class="layout-default">
      <el-header>
        <my-header />
      </el-header>
      <el-main>
        <nuxt />
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </client-only>
</template>

警告: Nuxt 版本小於 v2.9.0 的用戶, 請使用 <no-ssr>