require.context

主要使用require.context实现前端工程化动他引入文件
require.context(directory, useSubdirectories = false, regExp = /^.//)
第一个参数目标文件夹
是否查找子集 true | false
正则匹配
比如：
require.context(’./router’,true,/.routes.js/
可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引入文件，方便使用了
理由模块化
同理，也可以解决另一个问题，在vue项目中，路由文件会随着项目增大而越来越大，这个这个我们可以使用require.context进行模块化管理，首页定义好主路由，router.js

创建页面模块

假如这里的index.vue和login.vue是两个模块

创建路由模块

分别创建index模块和login模块的路由文件

index.routes.js
children下则是这个模块的路由

export default {
    path: '/index',
    name: 'index',
    component: () => import('../views/index.vue'),
    //子路由
    children:[

    ]
}

login.routes.js

export default {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue'),
    //子路由
    children:[

    ]
}

router/index.js

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

const routerList = [];
function importAll(r){
  //r.keys() 拿到所有匹配到的路由文件
  r.keys().forEach(
  	//r(key).default拿到default的路由对象
    (key) => routerList.push(r(key).default)
  );
}
//这里的目录和规则可以看自己习惯，这里获取的是routes下以.routes.js结尾的文件
//1. 路径
//2. 是否匹配子级文件
//3. 规则
importAll(require.context('./',false,/\.routes.js/))

const routes = [
  ...routerList,
]
const router = new VueRouter({
  routes
})

export default router

这样就可以在routes下面按模块管理路由了，不管加入什么，只需要在routes下新建就可以了