vue3+vite自动化注册全局组件vite中的引入方式。 import.meta.glob 为过动态导入 import

vite中的引入方式。

import.meta.glob 为过动态导入
import.meta.globEager 为直接引入（vite4.0已废弃）

components目录下创建一个global文件夹（放全局通用组件），index.ts文件

index.ts代码如下：


import type { App } from 'vue'
import type { AsyncComponentLoader } from 'vue'

import { defineAsyncComponent } from 'vue'
const importComponentsFn = import.meta.glob('./global/*.vue')
export default {
  install(app: App) {
    for (const [key, value] of Object.entries(importComponentsFn)) {
      const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader))
    }
  }
}

然后我们在main.js import引入

import components from '@/components/index'app.use(components)

然后在我们需要用到该AppNoData.vue组件的时候，直接即可

<manageTable />

原文地址 mp.weixin.qq.com/s/27eHdnMU1…