vite vue3 全局批量注册组件

方式1-使用import.meta.glob

同webpack的 require.context一样，这个是vite提供的一个方法

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', { eager: true });
for (const path in requireModules) {
  const moduleName = path.match(/.*\/(.+).vue$/)[1];
  const moduleConent = requireModules[path].default;
  console.log(moduleName, defineAsyncComponent(moduleConent));
  app.component(moduleName, defineAsyncComponent(moduleConent));
}

注意

import.meta.glob可以接受一个参数，来做个对比

同步

const requireModules = import.meta.glob('./modules/**/*.ts', { eager: true });
for (const path in requireModules) {
  const moduleConent= requireModules[path];
  console.log(moduleConent.default);
}

异步

const requireModules = import.meta.glob('./modules/**/*.ts');
for (const path in requireModules) {
  const moduleConent= requireModules[path];
  moduleConent().then((mod) => {
    console.log('moduleConent', mod.default);
  })
}

方式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"]
    }),
  ],
});