分享Vue各版本全局注册通用基础组件的方法

vue2 + webpack

require.context 是一个 webpack 特定的功能，用于在编译时动态地导入模块。通过使用 require.context，你可以在项目中轻松地进行全局注册通用基础组件。

import Vue from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';

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

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);

  const componentName = upperFirst(
    camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/.\w+$/, '')
    )
  );

  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  );
});

new Vue({
  el: '#app',
});

vue3

import { createApp } from 'vue';
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';

const app = createApp();

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

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);

  const componentName = upperFirst(
    camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/.\w+$/, '')
    )
  );

  app.component(
    componentName,
    componentConfig.default || componentConfig
  );
});

app.mount('#app');

Vue3 + Vite

在 Vite 中，你可以使用 import.meta.glob 来实现类似的动态导入和全局注册组件的功能。Vite 是基于原生 ES 模块的开发工具，因此它支持 import.meta 对象，其中包括 import.meta.glob 方法，用于动态加载模块。 以下是在 Vite 中使用 import.meta.glob 全局注册组件的示例：

// main.jsimport { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

const componentsContext = import.meta.glob('./components/Base[A-Z]*.{vue,js}');

Object.keys(componentsContext).forEach(async (key) => {
  const componentConfig = await componentsContext[key]();
  const componentName = key
    .replace(/^.//, '')
    .replace(/.\w+$/, '')
    .replace(/Base/, ''); // 去掉 Base 前缀

  app.component(
    componentName,
    componentConfig.default || componentConfig
  );
});

app.mount('#app');