前提概要

通过npm i vant安装最新vant3.5.0（以下简称vant4，官网那也是这么叫的）版本，已安装vite-plugin-style-import@1.4.1，通过配置vite.config.ts来实现按需引入组件，遇到如下报错 ：

分析情况

说是路径没找到这个文件，故寻找之，确实没有这个路径。

去node_modules包查找，发现vant4结构和以前的版本似乎不同了。按这个报错显示，他是在找vant文件夹（第一层）包下的lib（第二层），再找vant文件夹（第三层），再找es（第四层），但是实际上vant4的这个es文件是在vant文件夹（第一层）下的。也就是说路径确实错了。

解决

1.退级vant

装个vant3.2.几， 啥都行，反正不要是最新版本。我之前测试的是3.2.5可以，其他版本我也懒得测。为什么退级能解决呢？因为旧版本的vant路径就是和这个相匹配的。退级指令如下

npm i vant@3.2.5 

2.修改它引入的路径

既然知道了真实路径是什么样的，只需要修改下路径位置给他引到正确的就行了。修改ts.config.js如下

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
          /**这里是关键，把样式文件引到了正确的地方，
          如果你省略后缀名没有配.mjs，那要么你像我在下面resolve下面配一个忽略这个后缀名，
          要么你把`../es/${name}/style`改写成`../es/${name}/style/index.mjs` */
        },
      ],
    }),
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json', '.mjs'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      assets: '@/assets',
      utils: '@/utils',
      api: '@/api',
    },
  },