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

### 前言：

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

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

#### 一. 兼容方案：

##### 安装 Vant 4 以及 @vant/compat

```html
npm add vant@^4 @vant/compat@^1
```
##### 样式全局引入：

```html
import 'vant/lib/index.css';
```
##### 引用组件兼容方案：

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

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

#### 二. v4写法改造：

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

```html
import 'vant/lib/index.css';
```
##### 2. Toast.Loading改造：

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

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

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

showSuccessToast('成功文案');
showFailToast('失败文案');
```
##### 
解决方法：全局搜索Toast.Loading，替换为showLoadingToast，然后在导入vant组件的时候加入showLoadingToast即可。
#####

##### 3. 进行Toast的改造：

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

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

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

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

```html
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方式引用。

个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt