全局引入文件夹内全部组件 （require.context）

require.context是webpack暴露出来的方法，使用webpack或vue-cli搭建的项目都可以使用。

1.动态将components文件下的组件自动化注册为全局组件

main.js中

import Vue from "vue";

// 自动加载components目录下的 .vue 结尾的文件 第二参数是是否查询其子目录
const requireComponent  = require.context("./components", true, /\.vue$/);

requireComponent.keys().forEach(fileName  => {
  const componentConfig = requireComponent(fileName);
 // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.name, ctrl);
});

2.动态导入router文件下的分模块的路由文件

routes.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routerAry = []
// 自动加载modules目录下的 .js 结尾的文件
const requireRouter  = require.context("./modules", true, /\.js$/);

requireRouter.keys().forEach(fileName => {
    const routerConfig = requireRouter(fileName);
    routerAry.push(routerConfig);
})

const routes = [
    {
    path: '/login',
    component: load('login'),
    meta: {
      requireAuth: false,
      title: '登录'
    }
  },
  ...routerAry  
]