vue require.context全局注册组件的具体实现

const req = require.context('./component',true,/\.vue$/)

const req = require.context('./component',true,/\.vue$/)

console.log(req.keys()) 
// ['./component/SvgIcon.vue','./component/Form/Login.vue','./component/Channel.vue'...]

req.keys().forEach(item => {
    ...
})

<template>
  <div>A组件</div>
</template>
<script>
export default {
  name: 'ComponentA'
}
</script>

<template>
  <div>B组件</div>
</template>
<script>
export default {
  name: 'ComponentB'
}
</script>

<template>
  <div id="app">
    <ComponentA />
    <ComponentB />
  </div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB/BBB/BBBB'
export default {
  components: { ComponentA, ComponentB }
}
</script>

import Vue from 'vue'

const componentsContext = require.context('@/components', true, /index.vue$/) // true表示递归查找 正则匹配index.vue文件

componentsContext.keys().forEach(item => {
  const componentConfig = componentsContext(item).default
  Vue.component(componentConfig.name, componentConfig) // 全局注册组件
})

import './requireAllComponents'