vue3+vite项目下按需引入vant，报错无法解决导入解决方案
问题描述及原因分析解决方案
最近尝试使用vite+vue3+vant开发项目时，参考开发vant官网指南-快速入门-组件介绍
按照上面配置后，运行vite环境时，出现错误提示：Failedtosolveimport
根据错误信息，发现vant样式导入路径不正确。
程序解析为：项目路径/node_modules/vant/lib/vant/es/component/style
实际上应该是：项目路径/node_modules/vant/lib/vant/es/component/style
还有一个额外的vant/lib路径。
解析为vite.config.js文件中的正确路径。
vant官网代码如下：
在styleImport中添加代码块：
libs:[{libraryName:'vant',esModule:true,resolveStyle:name=`./es/${name}/style`}]
完整代码如下：
从'@vitejs/plugin-vue'导入vue;从'vite-plugin-style-import'导入styleImport,{VantResolve};导出默认{plugins:[vue(),styleImport({resolves:[VantResolve()],libs:[{libraryName:'vant'，esModule:true，resolveStyle:name=`./es/${name}/style`}]}),],};
修改后，重新运行vite，问题解决。
大家好，今天小编关注到一个比较有意思的话题，就是关于培训学校解决方案的问题，于是小编就整理了4个相关介绍培训学校解决方案的解答，让我们一起看看吧。给培训机构提供…
2024-09-20 05:09:07
大家好，今天小编关注到一个比较有意思的话题，就是关于福特dfmea培训学校的问题，于是小编就整理了2个相关介绍福特dfmea培训学校的解答，让我们一起看看吧。汽…
2024-06-13 00:51:40
watch和compute的区别前言watch和compute是vue实例对象中两个重要的属性。watch是一个监控属性，用于监控vue实例对象上的属性和方法的…
2024-05-07 10:03:29
Vue中组件间通信的六大方法-总结方式一：props/$emit父组件向子组件传值通过一个例子，讲解父组件如何向子组件传值：如何获取父组件App.vue中的数据…
2024-05-07 08:51:33
本文主要介绍Linux中使用pushd和popd命令操作目录。这两个命令分别常用于切换目录和删除目录。有需要的朋友可以参考以下.16-02-01Pushd将目录…
2024-05-07 01:38:03
2024-10-23 09:15:08
2024-10-23 07:39:07
2024-10-23 05:09:37
2024-10-23 01:45:08
2024-10-23 00:12:05
大家好，今天小编关注到一个比较有意思的话题，就是关于移动开发培训学校好吗山东的问…
大家好，今天小编关注到一个比较有意思的话题，就是关于培训机构运营模式案例分析的问…
931