vue3 + vite 按需引入vant(解决问题showFailToast样式不生效)

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components插件，它可以自动引入组件，并按需引入组件的样式。

目录

1.安装unplugin-vue-components

2.添加vite.config.js配置

3.main.js引入需要的组件

4.注意事项

1.安装unplugin-vue-components

npm i unplugin-vue-components -D

2.添加vite.config.js配置

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
...
Components({
   resolvers: [VantResolver()],
}),

 完整代码

3.main.js引入需要的组件

从 vant 中单独导入所需组件import { ... } from 'vant'

通过 .use() 注册每个组件app.use(router) .use(Loading)

避免了引入不必要的组件和样式，有助于减少最终打包体积。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { Loading, Dialog, Form, Field,Icon, Button, Toast } from 'vant'

import App from './App.vue'
import router from './router'
import 'lib-flexible/flexible'

import './assets/main.css'
const app = createApp(App)

app.use(createPinia())
app.use(router)
  .use(Loading)
  .use(Dialog)
  .use(Toast)
  .use(Form)
  .use(Field)
  .use(Icon)
  .use(Button)
app.mount('#app')

4.注意事项

函数式调用组件（如 Toast）可能不会自动引入样式，所以需要手动导入，这次遇到的问题是页面中使用showFailToast不生效，检查元素发现仅有van-toast的类名，但是没有相关样式

页面引入代码

import { showSuccessToast, showFailToast } from 'vant';
const onSubmit = (values) => { 
  showFailToast('测试错误')
}

 没有以弹窗形式弹出提示，只是在页面底部添加了文字元素如图

前提：引入方法没有问题

在main.js添加

import 'vant/es/toast/style'

原因：函数式调用组件（如 Toast）可能不会自动引入样式，所以需要手动导入，这是为了防止构建工具无法识别函数式组件的样式依赖。

解决撒花~