在用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 },
............
]})
这样就可以了。