关于 vue3 + antd design + vite配置按需加载问题记录

1. 使用 babel-plugin-import 进行按需加载,安装所需插件

yarn add vite-plugin-imp babel-plugin-import  -S
or
npm install vite-plugin-imp babel-plugin-import  -S

2. 配置 vite.config.js 文件

import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
  plugins: [
    vue(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

3. 在main.js 中开始按需加载UI组件，完成

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

4. 对应所用插件版本展示

"vite-plugin-imp": "^2.1.6",
"babel-plugin-import": "^1.13.3",
"ant-design-vue": "^2.2.8",
"vue": "^3.2.25"，
"vite": "^2.8.0"，