Vite版本从2.6.x升级到2.7.x之后，Vant从3.3.0升级到3.3.(1-n)之后，项目构建时报错

某次升级一下项目中的部分依赖：

Vite 从 2.6.x 升级到了 2.7.x

Vant 从 3.3.0 升级到了 3.3.7

（注：Vant3.3.0与Vite2.7.x一块使用并build时是可以成功的，但Vant的版本在向上动一点就会报错）

报错信息：

[vite]: Rollup failed to resolve import "/home/homework/node_modules/vant/lib/vant/es/config-provider/style" from "src/helper/vant.ts".

比较奇怪的是，虽然构建时会failed，但对dev环境并没有可见的影响。。。

一开始没有发现是什么原因导致的，后面一次检查中，发现最新的Vite在配置第三方UI组件样式按需加载的方式细节有调整。

 

原有（build failed）

import styleImport from 'vite-plugin-style-import';

//// codes ...
vueJSX(),
styleImport({
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: (name) => `vant/es/${name}/style`,
    },
  ],
}),
//// codes ...

 

新版（success）

import styleImport, { VantResolve } from 'vite-plugin-style-import';

//// codes...
vueJSX(),
styleImport({
  resolves: [VantResolve()],
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: component => `/node_modules/vant/es/${component}/style/index`,
    },
  ],
}),
//// codes...

 

按照“新版”的方式去配置vite.config，就可以解决Vant3.3.1及以上版本（Vite2.7.x）build项目代码失败的问题了