Vite+Vant4中Toast轻提示等组件无法展示的问题

Vant4官方文档

在开发过程中，发现vant4部分组件展示不出，例如Toast轻提示，在使用showFailToast()方法的时候，只是弹出个小白框，并没有提示信息，查阅资料之后得出其解决方案如下：

在vite.config.js文件中plugins中添加VantComponents配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import VantComponents from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    createSvgIconsPlugin({
    }),
    VantComponents({
      // 处理@vant/auto-import-resolver插件对某些组件的样式无法引入 例如：toast弹窗
      resolvers: [VantResolver({
        importStyle: false,
      })],
    })
  ],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  server: {
    proxy: {
    }
  }
})