vant3升级vant4后，使用toast异常解决方法

前言：

可以考虑采用官方提供的v3升级到v4的兼容写法，对现有的业务逻辑代码改动小一些。

如果不想用兼容方案，想直接使用V4的写法，可以参考后边的改造步骤。

一. 兼容方案：

安装 Vant 4 以及 @vant/compat

npm add vant@^4 @vant/compat@^1

样式全局引入：

import 'vant/lib/index.css';

引用组件兼容方案：

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

Toast();
Toast.clear();

如上操作即可，直接全局搜索Toast，然后单独引入组件就好了，业务逻辑代码不需要动，影响较小。

二. v4写法改造：

 

1. main.js 全局引入样式文件:

import 'vant/lib/index.css';

2. Toast.Loading改造：

vant4中Toast采用单例模式，不再支持v3的 Toast.Loading、 Toast.Success，都需要单独引入了，如下：

import { showLoadingToast，showSuccessToast，showFailToast  } from 'vant';

showLoadingToast({
  message: '加载中...',
  forbidClick: true,
});

showSuccessToast('成功文案');
showFailToast('失败文案');

解决方法：全局搜索Toast.Loading，替换为showLoadingToast，然后在导入vant组件的时候加入showLoadingToast即可。

3. 进行Toast的改造：

全局搜索Toast，避开上边2中的showLoadingToast这些，全局替换为showToast(包括业务代码中的），如下

//v3
import { Toast } from "vant";
Toast("v3");

//v4
import { showToast } from "vant";
showToast("v4");

4. 修改vite.config.ts文件：

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: name => {
            //return `../es/${name}/style`;//原来的代码
            //修改后的代码
            if (name == "show-toast" || name == "show-loading-toast") {
              return `../es/toast/style`;
            } else {
              return `../es/${name}/style`;
            }
          }
        }
      ]
    })
...

之所以这么修改，是因为vant4组件库里边只有Toast，并没有showToast、showLoadingToast目录，所以会报错找不到样式文件，按上边的这么修改就可以了。

后记：

对于已经上线项目或者比较大型的项目建议直接使用兼容模式，尽量减少对业务逻辑代码的改动。

如果是新项目或者开发完但还没有提测的可以考虑直接使用V4方式引用。