vue3 怎么自动全局注册某个目录下的所有 vue 和 tsx 组件

在开发 vue3 项目时，我们会有这样的诉求，怎么自动全局注册某个目录下的所有 vue 和 tsx 组件？

虽然已经有非常强大的 unplugin-vue-components 支持，但是在某些动态场景下，unplugin-vue-components 也选择了不支持。
在这里插入图片描述
那么我们来了解下，在不使用 unplugin-vue-components 的情况下，怎么自动全局注册某个或某些目录下的 vue 或 tsx 组件。

方法一：使用 require.context (适用于 Webpack)

require.context 是 Webpack 提供的一个方法，可以扫描指定目录下符合特定规则的文件，并将其作为模块引入。

初始化 Vue 应用

import { createApp } from 'vue';
const app = createApp({/* 你的应用配置 */});

使用 require.context 查找组件
```
const components = require.context('./components', true, /\.vue$|\.tsx$/); // 扫描 './components' 目录及其子目录下的所有 .vue 和 .tsx 文件
```
- './components'：要扫描的目录，相对路径。
- true：是否递归扫描子目录。false 表示只扫描当前目录，true 表示扫描所有子目录。
- /\.vue$|\.tsx$/：匹配的文件名规则，这里匹配以 .vue 或 .tsx 结尾的文件。

全局注册组件

components.keys().forEach(key => {const componentConfig = components(key); // 导入组件const componentName = key.split('/').pop().replace(/\.(vue|tsx)$/, ''); // 提取组件名 (例如，从 './MyComponent.vue' 中提取 'MyComponent')app.component(componentName, componentConfig.default || componentConfig); // 全局注册组件
});app.mount('#app'); // 挂载应用

components.keys()：返回所有匹配的文件路径的数组。
components(key)：根据文件路径导入组件。
componentConfig.default || componentConfig：兼容 ES Module 和 CommonJS 两种导出方式。componentConfig.default 用于 ES Module 的 export default，而 componentConfig 用于 CommonJS 的 module.exports。

方法二：使用 Vite 的 import.meta.glob (适用于 Vite)

如果你的项目使用 Vite 作为构建工具，可以使用 import.meta.glob 来实现类似的功能。

使用 import.meta.glob 查找组件
```
const components = import.meta.glob('./components/**/*.{vue,tsx}', { eager: true }); // 扫描 './components' 目录及其子目录下的所有 .vue 和 .tsx 文件
```
- './components/**/*.{vue,tsx}'：使用 glob 模式匹配文件。** 表示递归匹配所有子目录。
- { eager: true }：立即导入所有匹配的模块。如果不使用 eager: true，则会返回一个 promise，需要在注册组件时进行异步处理。

全局注册组件

import { createApp } from 'vue';
const app = createApp({/* 你的应用配置 */});for (const path in components) {const component = components[path];const componentName = path.split('/').pop().replace(/\.(vue|tsx)$/, '');app.component(componentName, component.default || component);
}app.mount('#app');

方法三：创建 Vue 插件

可以将自动注册组件的逻辑封装成一个 Vue 插件，方便在多个项目中复用。

创建插件文件 (例如 registerComponents.js)

export default {install: (app) => {const components = import.meta.glob('./components/**/*.{vue,tsx}', { eager: true });for (const path in components) {const component = components[path];const componentName = path.split('/').pop().replace(/\.(vue|tsx)$/, '');app.component(componentName, component.default || component);}}
};

在 main.js 中安装插件

import { createApp } from 'vue';
import App from './App.vue';
import registerComponents from './registerComponents'; // 导入插件const app = createApp(App);
app.use(registerComponents); // 安装插件
app.mount('#app');

方法四：使用 index.ts 导出组件

在组件目录下创建一个 index.ts 文件，将所有组件导出，然后在 main.ts 中一次性导入并注册。

创建 index.ts (位于 components 目录下)

import MyComponentA from './MyComponentA.vue';
import MyComponentB from './MyComponentB.vue';
// 导入更多组件export {MyComponentA,MyComponentB,// 导出更多组件
};

在 main.ts 中导入并注册

import { createApp } from 'vue';
import App from './App.vue';
import * as components from './components'; // 导入所有组件const app = createApp(App);for (const componentName in components) {app.component(componentName, components[componentName]);
}app.mount('#app');