在Vite + Vue3 +Vant4中按需引入组件，使用Toast提示信息不展示

一、背景

使用vant + vue3 + vite 搭建h5，按需引用组件

image.png

二、现象

使用van-button这些组件时完全没有问题，但是在使用轻提示（Toast）时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到body元素下了，只是因为样式原因导致看不见。

三、原因

@vant/auto-import-resolver这个插件对某些组件的样式无法引入

四、解决

4.1. 取消@vant/auto-import-resolver这个插件的样式依赖

vite.config.js中通过importStyle: false,取消插件引入样式

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        VantResolver({
          importStyle: false,
        }),
      ],
    }),
  ],
});

4.2. 在main.js

import "vant/lib/index.css";