vite vue3 全局批量注册组件-526互联

方式1-使用import.meta.glob

import { createApp, defineAsyncComponent } from 'vue'

const app = createApp(App);
app.mount('#app');

// antd全局使用图标，遍历引入
const icons: any = Icons
for (const i in icons) {
  app.component(i, icons[i])
}

// 注册全局组件
const requireModules = import.meta.glob('./components/**.vue');
for (const path in requireModules) {
  const moduleName = path.match(/.*\/(.+).vue$/)[1];
  const moduleConent: any = requireModules[path];
  console.log(moduleName, defineAsyncComponent(moduleConent));
  app.component(moduleName, defineAsyncComponent(moduleConent));
}

方式2-使用unplugin-vue-components

安装依赖

yarn add --dev unplugin-vue-components

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 按需引入
      dts: true,
      dirs: ["src/components"]
    }),
  ],
});