解决vue3项目中el-menu不兼容SSR问题

解决el-menu不兼容SSR报错

首先它会报错：Hydration completed but contains mismatches，并且发出关于 Hydration 的警告！

下面讲下我是如何一步一步解决的：

1、开始是真的不知道怎么解决，网上搜索报错信息也没有结果，只知道是 el-menu 不兼容 ssr

2、然后进入 el-plus 官网终于发现了线索：

Menu 菜单

为网站提供导航功能的菜单。

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

3、所以我就直接加上了 client-only 标签，结果 vue3 无法识别该标签，才发现这是基于 Nuxt 框架的标签

4、那如何让 Vue3 项目使用 client-only 呢？百度之后发现了这样一个插件 vue-client-only

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

5、所以我立马用了起来，结果又报错了… 然后我再进入这个插件的 github 官网：https://github.com/egoist/vue-client-only ，发现这是 4年前的项目，所以这肯定只基于 vue2 不兼容 vue3 ！！

6、然后就在我又又又不知道怎么办的时候，我点开了这个项目的 Issues ，发现已经有人问了一个问题

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问题的详细内容，更多关于el-menu不兼容SSR问题的资料请关注脚本之家其它相关文章！

最新评论