记录一下当前出现问题的vant和按需引入插件的版本分别是"vant": "^3.6.6", "vite-plugin-style-import": "^1.4.1
按照vant官网文档的指引,vite-plugin-style-import插件会自动将代码转化为按需引入的形式寻找对应vant下style的路径。
import { Button } from 'ant-design-vue';
↓ ↓ ↓ ↓ ↓ ↓
import { Button } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/index.js';
但在使用过程中意外出现了报错,经过排查发现解析过程中路径地址出现问题,插件解析后的路径地址不存在所以要手动改一下路径:
plugins: [vue(), styleImport({
resolves: [VantResolve()],
libs: [{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => {
//对应自己的node_modules目录下vant的路径,去找到es目录
return `../es/${name}/style`
},
}]
}),vueJsx()],