参考: blog.csdn.net/Steven_Son/…

按需引入 vant 组件

vite.config.js

import { VantResolver } from 'unplugin-vue-components/resolvers';

export default () => {
    return {
        plugins: [
            VantResolver()
        ]
    };
}

业务引用的时候，如下:

<template>
    <VanSticky />
    <!-- 不再是下面这样的调用方式了 -->
    <Sticky />
</template>
// 不需要引用 Sticky
// import { Sticky } from 'vant';

按需引入 vant 的 css

vite.config.js

import { createStyleImportPlugin } from 'vite-plugin-style-import';

export default () => {
    return {
        plugins: [
            createStyleImportPlugin({
        resolves: [
          {
            libraryName: 'vant',
            libraryNameChangeCase: 'pascalCase',
            resolveStyle: (name) => {
              if (['Locale', 'SwipeItem'].some((el) => el === name)) {
                return `vant/es/${name.replace(
                  /[A-Z]+(?![a-z])|[A-Z]/g,
                  ($, ofs) => (ofs ? '-' : '') + $.toLowerCase()
                )}/index.mjs`;
              }
              return `vant/es/${name.toLocaleLowerCase()}/index.css`;
            },
          },
        ],
      }),
        ]
    };
}

部分业务引用的方式是如下的:

// tsx
import { Overlay } from 'vant';

需要兼容这种方式需要配置👆🏻的 plugin 其中 Locale、SwipeItem 这些都是需要特殊引用，用正则处理了下