Vite自动全局注册组件！卖坚果的怪叔叔

因为在Vite中不能使用webpack的require.context()方式来读取文件所以之前使用webpack注册全局组件的方式就不能使用了。

Webpack注册全局组件的方式

import Vue from 'vue'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /[A-Z]\w+\.(vue|js)$/,
)

requireComponent.keys().forEach((fileName) => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, ''),
    ),
  )
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 <code>export default</code> 导出的，
    // 那么就会优先使用 <code>.default</code>，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig,
  )
})

Vite注册全局组件的方式

1、import.meta.glob()

2、import.meta.globEager()


// 这里根据实际情况设置路径
const components = import.meta.glob('./组件目录名/*/*.vue')

export default function install (app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.split('/')[1] 
    app.component(name, defineAsyncComponent(value))
  }
}

在main.js文件中import并use


# main.js

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

createApp(App).use(components).mount('#app')

vite