记录一下vant中引入vite-plugin-style-import按需导入失败的问题

772 阅读1分钟

记录一下当前出现问题的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()],