处理 vite 中按需引入 vant 时表达式组件无样式的问题
当在 vite 框架中按需引入 vant ui 时，部分以 javascript 表达式形式引用的组件可能无法正确加载样式，而标签形式引用的组件则正常。这通常与插件配置和组件类型有关。
解决方法
有两种解决方法：
方法 1：使用 unplugin-auto-import 插件
import autoimport from 'unplugin-auto-import/vite'
export default {
plugins: [
autoimport({
imports: ['vue'],
resolvers: [
// add vant resolver
{
id: 'vant',
from: 'vant',
name: 'vant',
resolve: (name) => `vant/es/${name}/style`,
},
],
}),
],
}方法 2：手动注册组件并导入样式
如果不想使用插件，可以手动注册函数形式的组件并导入其样式：
import { Toast } from 'vant'
import { ImagePreview } from 'vant'
import 'vant/es/toast/style'
import 'vant/es/image-preview/style'
app.use(Toast)
app.use(ImagePreview)注意：
以上就是Vite 按需引入 Vant 时，表达式组件为何无法加载样式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
430
