vue批量注册全局组件（vue2/vue3）

原创

于 2025-09-26 04:00:00 发布 · 439 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #注册全局组件 #vue2 #vue3

在这里插入图片描述

✅ 方法一：（Vue 3）使用 Vite 的 import.meta.glob

1. 创建全局组件目录

src/
├── components/
│   ├── Button.vue
│   ├── Modal.vue
│   ├── Card.vue
│   └── index.js

2. 在 components/index.js 中批量注册

// src/components/index.js
import {
   
    App } from 'vue'

// 使用 import.meta.glob 自动导入所有 .vue 文件
const components = import.meta.glob('./**/*.vue', {
   
    eager: true })

export default {
   
   
  install: (app) => {
   
   
    // 遍历所有组件
    Object.keys(components).forEach(key => {
   
   
      const name = key
        .replace('./', '')           // 移除 ./ 
        .replace(/\.\w+$/, '')       // 移除扩展名
        .<