记录 Vite 配置 Vant 按需加载 问题

在使用 vite 搭配 vant ui 使用时，根据 vant 官网推荐的按需引入插件 vite-plugin-style-import , 存在一些问题，所以在排坑的过程中，摸索出了一套操作。
插件版本参考如下

// package.json 
	"vite-plugin-style-import": "1.4.1",   // 无 ^ 
	"vite": "^2.9.9",
	"vant": "^3.5.0",
	"vue": "^3.2.25"

依赖安装完成后，在 vite.config.js 文件中配置

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

// https://vitejs.dev/config/
export default defineConfig(({
  command,
  mode
}) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      // vant 按需引入自动配置   重点 直接配置文件目录地址
      styleImport({
        libs: [{ libraryName: 'vant', esModule: true, resolveStyle: name => `../es/${name}/style/index` }]
      }),
    ],
  }
})

配置完成后，直接在 main.js 文件中进行按需引入，不要拆分出一个什么 vant.js 文件后引入， Vue3 版本每次 createApp 出来的对象不是同一个对象。所以不同于 Vue2

import { createApp } from 'vue'
import App from './App.vue';
import { Button } from 'vant';
const app = createApp(App);
app.use(Button);
app.mount('#app');