解決el-menu不兼容SSR報錯

首先它會報錯：Hydration completed but contains mismatches，并且發(fā)出關(guān)于 Hydration 的警告！

下面講下我是如何一步一步解決的：

1、開始是真的不知道怎么解決，網(wǎng)上搜索報錯信息也沒有結(jié)果，只知道是 el-menu 不兼容 ssr

2、然后進入 el-plus 官網(wǎng)終于發(fā)現(xiàn)了線索：

Menu 菜單

為網(wǎng)站提供導(dǎo)航功能的菜單。

在 SSR 場景下，您需要將組件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

3、所以我就直接加上了 client-only 標簽，結(jié)果 vue3 無法識別該標簽，才發(fā)現(xiàn)這是基于 Nuxt 框架的標簽

4、那如何讓 Vue3 項目使用 client-only 呢？百度之后發(fā)現(xiàn)了這樣一個插件 vue-client-only

這是它的 npm 鏈接：https://www.npmjs.com/package/vue-client-only

5、所以我立馬用了起來，結(jié)果又報錯了… 然后我再進入這個插件的 github 官網(wǎng)：https://github.com/egoist/vue-client-only ，發(fā)現(xiàn)這是 4年前的項目，所以這肯定只基于 vue2 不兼容 vue3 ！！

6、然后就在我又又又不知道怎么辦的時候，我點開了這個項目的 Issues ，發(fā)現(xiàn)已經(jīng)有人問了一個問題

Is there a need to update component for usage with Vue 3? #122

下面這個回答終于拯救了我！

I created a small package for those who want to use the client-only component with Vue 3 outside a Nuxt project.
Check it here https://github.com/duannx/vue-client-only

7、進入他封裝好且基于 Vue3 的 vue-client-only ：https://github.com/duannx/vue-client-only

然后按照使用教程來就解決報錯了?。。?！

npm install --save @duannx/vue-client-only

import ClientOnly from '@duannx/vue-client-only'
<client-only>
    <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="orders">{{ t('header.orders') }}</el-menu-item>
        <el-menu-item index="records">{{ t('header.records') }}</el-menu-item>


        <el-sub-menu index="language">
            <template #title>{{ t('header.language') }}</template>
            <el-menu-item index="zh">簡體中文</el-menu-item>
            <el-menu-item index="en">English</el-menu-item>
        </el-sub-menu>


        <el-menu-item index="logout" v-if="userStatus">
            {{ t("login.logout") }}
        </el-menu-item>


        <el-menu-item index="login" v-if="!userStatus">
            {{ t("login.loginTab") }}/{{ t("login.signTab") }}
        </el-menu-item>

    </el-menu>
</client-only>

以上就是解決vue3項目中el-menu問題的詳細內(nèi)容，更多關(guān)于el-menu不兼容SSR問題的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論