vue3 中使用vant按需加载遇到的问题

项目的初始化的设置

pnpm create vite my-vue-app -- --template vue-ts

安装vant

pnpm add vant

vite中配置：
根据官网说明进行配置时，在使用其他组件的时候，没遇到上问题，但是在使用toast的时候和dailog的时候，样式却出现问题，查阅资料,使用vite-plugin-style-import、AutoComopnents

import { defineConfig } from 'vite';
import legacy from "@vitejs/plugin-legacy";
import vue from '@vitejs/plugin-vue';
import { visualizer } from "rollup-plugin-visualizer";
// import Components from 'unplugin-vue-components/vite';
// import { VantResolver } from 'unplugin-vue-components/resolvers';
import { createStyleImportPlugin, VantResolve } from "vite-plugin-style-import";
import AutoComopnents from "unplugin-vue-components/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from 'path';
export default defineConfig({
  resolve: {
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
    alias: [
      { find: "@", replacement: resolve("src") },
      { find: "@assets", replacement: resolve("src/assets") },
      { find: "@components", replacement: resolve("src/components") },
      { find: "@router", replacement: resolve("src/router") },
      { find: "@store", replacement: resolve("src/store") },
      { find: "@styles", replacement: resolve("src/styles") },
      { find: "@utils", replacement: resolve("src/utils") },
      { find: "@views", replacement: resolve("src/views") },
    ],
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        charset: false,
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // additionalData: '@import "./src/assets/scss/var.scss"'
      },
    }
  },
  plugins: [vue(),
  // Components({
  //    resolvers: [VantResolver()],
  // }),
  AutoComopnents({
    // 处理自动注入
    dirs: resolve("src/components/auto"),
    dts: "./src/components/components.d.ts", // 开发查看自动引入组件情况
  }),
  createStyleImportPlugin({
    resolves: [VantResolve()],
    // 解决vant 按需引入的问题,找不到文件(vant 按需引入自动配置   重点 直接配置文件目录地址)
    libs: [{ libraryName: 'vant', esModule: true, resolveStyle: name => `../es/${name}/style/index` }]
  }),
  createSvgIconsPlugin({
    iconDirs: [resolve("src/assets/svg")],
    symbolId: "icon-[dir]-[name]",
  }),
  legacy({
    ignoreBrowserslistConfig: true,
    targets: ["android >= 4", "ios >= 7", "chrome >= 36"],
    // additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
  }),
  visualizer()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts']
        }
      },
    },
  },
})

在设置createStyleImportPlugin之后，需要一个个的引入你需要用到的组件，自定义自动引入vant相关组件

import { Button, Circle, ConfigProvider, DatetimePicker, Dialog, Form, Field, Icon, List, Popup, PullRefresh, Cell, CellGroup,Uploader,Collapse, CollapseItem,Step, Steps,Badge,RadioGroup, Radio,Picker,Calendar,DropdownMenu, DropdownItem  } from "vant";
import { App, Plugin } from "vue";

const plugins = [Button, Circle, ConfigProvider, DatetimePicker, Form,Field, Icon, List, Popup, PullRefresh, Cell, CellGroup,Uploader,Collapse, CollapseItem,Step, Steps,Badge,RadioGroup, Radio,Picker,Calendar,DropdownMenu, DropdownItem     ]; 

const vantInstall: Plugin = {
  install(app: App) {
    app.component(Dialog.Component.name, Dialog.Component);
    plugins.forEach(item => {
      app.component(item.name, item);
    });
  },
};
export default vantInstall;

在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue';
import router from './routers/index';
import vantInstall from "./components/vant";
import 'virtual:svg-icons-register'; // 引入svg icon注册脚本

const app = createApp(App);
app.use(vantInstall); // vant 按需加载
app.use(router).mount('#app');

完成vant的注入后，toast和dialog组件可以正常使用，但是查看打包后的文件，一些没引入的组件其实也还是会被打包