webpack+Vue2实现组件的全局自动化注册的详细步骤

在vue项目开发当中，频繁的注册组件，无论是公共组件，或者基础组件，想在其他组件当中使用就需要频繁的在组件内通过import去引用，那么有没有一种方法可以实现组件的全局自动化注册？
答案：可以的

一、相关知识点

知识点：require.context、forEach、replace

二、实现方式（main.js）

具体实现方式参考，Vue官网组件注册的实现方式，进行二次完善修改

1、Vue2：

//全局自动注册组件
const requireComponent = require.context(
  '@/components/',
  true,
  /.vue/
);
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/','g'),"");
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
  console.log('全局注册组件',componentName)
});

2、Vue3：

//全局自动注册组件
const requireComponent = require.context(
    '@/',
    true,
    /.vue/
);
const app = createApp(App)
requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.replace(/(\.\/|\.vue)/g, '').replace(new RegExp('/', 'g'), "");
    // 全局注册组件
    app.component(
        componentName,
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，否则回退到使用模块的根。
        componentConfig.default || componentConfig
    );
    console.log('全局注册组件', componentName)
});

如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；