在用vue开发的过程中，我们可能会使用import引入文件，但需要引入多个的时候就会变得繁琐起来，这时我们可以使用require.context去动态引入多个文件。

用法：require.context(文件夹路径，是否搜索子文件夹下面的内容，正则匹配)

例子：将路由文件夹底下的文件引入index.js文件

 

路由文件夹

我们原来的处理方式是一个一个import进来，如下：

使用import方式引进

现在我们把以上代码注释掉，在index.js里面加入以下代码：

let routeNames = []

var files = require.context('./', false, /\.js$/)

files.keys().forEach(name => {  

    if (name !== './index.js') {   

     routeNames = routeNames.concat(files(name).default || files(name))

  }})

require.context函数执行后返回的是一个函数,并且这个函数有3个属性

resolve 是一个函数，它返回请求被解析后得到的模块 id。

keys 是一个函数，它返回一个数组，返回每个模块的相对路径。

id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

因为我需要的是一个数组，所有把结果遍历后拼接成数组routeNames，把routeNames加入路由
（以下代码在index.js里）

const router = new Router({

  routes: [     

{path: '/',

redirect: '/login',     

 name: ' ',      

component: AppContainer,      

children: routeNames.default || routeNames }，

............

]})

这样就可以了。