vue批量包含所有组件

在一些大中型项目中，一个页面涉及的组件可能非常多，有些共有的组件单个引入的话，代码就显得非常冗余了，这时我们可以用批量引入的方式，一次性引入所有组件。
比如我在components文件夹下写了好多组件，其中有一个common文件夹下的组件，我希望所有页面都引入使用，怎么来做呢？

demo.png

可以使用require.context这个函数来搞定，这个函数的目的是递归一个文件夹，将所有文件都读出来，然后再配合forEach，将所有组件批量注册即可。
在components文件夹下新建index.js文件：

import Vue from "vue";

const requireComponents = require.context('./common', true, /\.vue/);
/*requireComponents:
webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
*/
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
    // 组件实例
    const reqCom = requireComponents(fileName)
    // 截取路径作为组件名
    const reqComName = fileName.split('/')[1]
    console.log(reqComName)
    // 组件挂载
    Vue.component(reqComName, reqCom.default || reqCom)
})

common文件夹下的组件，应该保证文件名跟组件名是一致的：

22.png

publicHeader/publicHeader.vue:

publicHeader/index.js:

import publicHeader from "./publicHeader.vue";
export default publicHeader;

然后我们需要在main.js引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

import "@/components"; // 直接引入即可，不用指定名字

import store from './store'
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;

Vue.use(ViewUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这样就可以在所有页面直接使用共有组件了。