结论：vite本身已经具有按需加载组件的功能，额外需要做的是按需引入样式文件。通过vite-plugin-style-import插件完成按需加载样式文件功能。
补充：解决方法2—直接使用babel-plugin-import的整合插件vite-plugin-importer，插件地址：GitHub - ajuner/vite-plugin-importer: Integration for babel-plugin-import

过程：由于自身的知识储备不够，导致一坑未平一坑又起。记录一下填坑的过程

第一坑，根据组件库文档描述，按需加载需要安装babel-plugin-import插件，然后配置.babelrc(或者7.0版本以后的babel.config.js)。按照描述完成这些步骤之后，准备愉快的查看页面效果。结果组件样式没有任何变化。

        猜测是babel插件没有执行，于是在插件代码中加入调试信息，果然没有任何动静。经过一番挣扎发现原来在vite中执行babel需要安装插件vite-plugin-babel，同时在vite.config.js中加入如下配置。做完这番工作之后，运行项目，结果报错了。

import babel from "vite-plugin-babel"

export default defineConfig({
  plugins: [
    vue(),
    babel.default()
  ]
})

第二坑，报错信息如下，babel.config.js加载报错了。原因这里需要以cjs后缀名结尾——即需将文件命名为babel.config.cjs。因为vite采用的是ESmodule的方式，所以默认对于js文件会以esmodule来解析，而Babel.config.js文件是commonJS形式，所以需通过cjs后缀名来显示表明。

 这里涉及到node两种模块规范的文件加载问题，在vite项目的package.json文件中有这样一个属性

"type": "module",

这时默认加载的js文件都认为是esmodule规范的，如果要加载commonJS规范的文件可以通过指定文件后缀名。同理也可以.mjs后缀名来表示esmodule规范的文件。(node默认只支持cjs语法)

现在babel-plugin-import插件终于能打印出来调试信息。

第三坑，然而组件的样式仍然纹丝不动。这时怀疑还是模块语法的问题，在继续深究的过程中，发现了另一个插件vite-plugin-style-import。这是vite用来专门按需加载组件库样式文件的插件，实现的思想其实跟babel-plugin-import类似，都是通过组件库及组件名去找对应目录下的style文件，然后import进项目。vite.config.js的配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
//import babel from "vite-plugin-babel"
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //babel.default(),
    createStyleImportPlugin({
      resolves: [VantResolve()]
    }),
  ]
})

他提供了几个常见库的resolves,包括AntdResolve、AndDesignVueResolve、ElementPlusResolve、VantResolve、NutuiResolve、VxeTableResolve等。

至此终于目的达到。