解決vue3項(xiàng)目中el-menu不兼容SSR問題

更新時(shí)間：2023年12月10日 08:42:42 投稿：wdc

這篇文章主要介紹了解決vue3項(xiàng)目中el-menu不兼容SSR問題,需要的朋友可以參考下

解決el-menu不兼容SSR報(bào)錯(cuò)

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

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

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

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

Menu 菜單

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

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

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

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

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

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

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

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

下面這個(gè)回答終于拯救了我！

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、進(jìn)入他封裝好且基于 Vue3 的 vue-client-only ：https://github.com/duannx/vue-client-only

然后按照使用教程來就解決報(bào)錯(cuò)了！?。。?/p>

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">簡(jiǎn)體中文</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項(xiàng)目中el-menu問題的詳細(xì)內(nèi)容，更多關(guān)于el-menu不兼容SSR問題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: