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'
// http://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: {
}
}
})