Nuxt3 + Vant4 提示 Hydration completed but contains mismatches. 错误

2023年初，正在家里填Nuxt3的坑

本打算用新的nuxt去搞个服务端渲染 ssr

注意 nuxt.config.ts

配置中要没有ssr:false,或者ssr:true也行,贴一下我的项目中的nuxt.config的配置

export default defineNuxtConfig({
  app: {
    baseURL: '/msite',
    head: {
      viewport: 'width=device-width, initial-scale=1, viewport-fit=cover'
    }
  },
  components: [
    {
      path: '~/components/',
      pathPrefix: false
    }
  ],
  experimental: {
    externalVue: true,
  },
  modules: [
  ],
  build: {
    transpile: ['dayjs'],
  },
  typescript: {
    shim: false
  },
  css: [
    'vant/lib/index.css',
    'assets/css/index.css'
  ],
  postcss: {
    plugins: {
      'postcss-px-to-viewport-8-plugin': {
        viewportWidth: 375
      }
    }
  },
  nitro: {
  },
})

引入Vant 组件库

在根目下增加一个文件夹叫 plugins/ ,在下面新增一下 vant.ts

import { defineNuxtPlugin } from '#app'
import { Button, Icon, Image, List, PullRefresh, Sticky, Tabbar, TabbarItem } from 'vant'
// import 'vant/lib/index.css'
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp
    .use(Button)
    .use(Icon)
    .use(Image)
    .use(List)
    .use(PullRefresh)
    .use(Sticky)
    .use(Tabbar)
    .use(TabbarItem)
})

如上图按需加载，主要是移动项目，4G下秒开是目标。

问题报露

不管是在组件中用vant 的组件，还是在页面中使用，每个组件都会报警告，在第一次打开页面是会出现样式错乱，跳转后就正常了，Nuxt3 代码时发现 Vue runtime 报了一个 Hydration completed but contains mismatches. 的错误

百度找了一下，原因是标签下用了不符合 shtml 标准的属性，因为vant 的props 都写到div上了，但是怎么解决，网上找不到答案，最后使用 包一下，会不报错，但很明显是不走了ssr,

果然在 nuxt.config 里把 ssr: false，也解决了，但是这不是我的初衷

记录解决

最后我真的不知道vant 是否不支持 nuxt3， 但是在vant4 文档处发现了

├── vant                # Vant 相关示例
│   ├── vite            使用 Vue 3、Vant 4、Vite 搭建应用
│   ├── nuxt3           使用 Nuxt 3、Vant 4 搭建应用
│   ├── vue3            使用 Vue 3、Vant 4、Vue Cli 搭建应用
│   ├── vue3-ts         使用 Vue 3、Vant 4、ts、vite、pnpm 搭建应用
│   ├── cdn             通过 CDN 引入 Vant
│   ├── rem             配置 rem 适配
│   ├── viewport        配置 viewport 配置
│   └── typescript      配置 typescript 按需引入
│
├── vant-weapp          # Vant Weapp 相关示例
│   └── base            使用 Vant Weapp 搭建小程序
│
└── vant-cli            # Vant Cli 相关示例
    └── base            使用 Vant Cli 搭建组件库

看了官方实例，down下来开跑，真发现他的没有，我的就有，最终对比，是官网nuxt用的3.0.0，而我用了最新版 3.1.0

PS:不知道两天后发布的3.1.1会不会解决这个问题，坑到掉头发

更新：官方有说3.1.1确实就是为了解决这个问题，但是让我刚好就安装到了这个错误版本