升级到 Vant 4 踩坑记：Vue 3 项目中 useMessage Hook 全部失效，Toast 报错，如何破局？

记录在项目中将 Vant 从 3 升级到 4，结果遇到了一个大坑：我二次封装的 Toast 函数式调用全部失效了，项目中所有的提示消息都不能用了。这可把我急坏了！

Vant 3 的使用方式

在 Vant 3 中，我们直接使用函数调用 Toast() 来显示消息，非常方便。然而，升级到 Vant 4 后，发现这种方式不再可行了。

尝试在 main.ts 中按需引入

我首先尝试在 main.ts 中按需引入 Toast，希望能解决问题：

import vant, { Toast } from 'vant';
import App from './App.vue';
import 'vant/lib/index.css';

const app = createApp(App);

app.use(vant);
+    app.use(Toast);

app.mount('#app');

然而，这样引入的 Toast 是一个组件，而不是我需要的函数。这让我更加着急了。

查阅文档和 Google

我开始疯狂地查阅文档和 Google，试图找到解决方案。甚至还上了 GitHub，找到了一些相关的讨论，但都没有解决我的问题。

终于找到解决方案 但不是我想要的

功夫不负有心人，我终于在 Vant 3 升级到 Vant 4 的更新文档中找到了有用的信息。文档中提到，Vant 4 中 Toast 的调用方式进行了调整：在里面找到了有用的提示，文档中说Toast 调用方式调整，Vant 4 中，Toast 组件的调用方式也进行了调整，也就是语法变了，包括 Toast 上挂载的其他方法也进行了重命名，

// Vant 3
Toast(); // 函数调用

// Vant 4
showToast(); // 函数调用
Toast; // 组件对象

寻找到兼容方案

接着往下看文档，发现一个兼容方案，兼容方案说为了便于代码迁移，提供了兼容方案，可以使用 @vant/compat 中导出的 Toast 对象来兼容原有代码。

安装兼容包

# 通过 pnpm 安装
pnpm add vant@^4 @vant/compat@^1

修改引用路径

安装后，将引用路径从 vant 改为 vant/compat：

- import { Toast } from 'vant';
+ import { Toast } from '@vant/compat';

然而，新的问题出现了：TypeScript 报错，找不到模块和类型声明。重启项目也无济于事。

解决 TypeScript 报错

更新 tsconfig.json

在 tsconfig.json 中添加以下配置，确保 TypeScript 能正确处理 .vue 和 .ts 文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

成功解决

回到页面，看到识别成功的提示，所有属性都加载成功了！

最后测试

在页面中测试，终于成功了！ 避免了大量的修改~

<template>
  <div>
    <van-button @click="handleSuccess('配置成功了')" type="primary">提示内容</van-button>
  </div>
</template>

<script setup lang="ts">
import { Toast } from '@vant/compat';

/* 成功 */
function handleSuccess(message: string, cbFn?: () => void) {
  Toast({
    type: 'success',
    message,
    duration: 2000,
    onClose: cbFn,
  });
}
</script>
<style scoped></style>

结语

这次升级 Vant 4 的经历真是让我心力交瘁，但也让我学到了很多。每次遇到问题时，保持冷静、耐心查阅文档和社区资源，最终总能找到解决方案。如果你也在升级过程中遇到类似问题，希望这篇文章能帮到你。加油，编程之路上，我们一起前行！