如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。
一、使用require.context的场景
(1)需要导入一个文件夹下面的所有文件
(2)路由中导入各个组件文件
如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中
二、require.context分析
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
require.context函数接受三个参数
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则
三、实例说明
如上图所示,将mock文件夹下面的 mock1 和 mock2组件导入
text_require.vue
<template>
<div>
<!-- 全部加入 -->
<component v-for="comp in comps" :key="comp.id" :is="allComps[comp]">
</component>
<!-- 单个加入 -->
<component :is="allComps['mock1']"> </component>
</div>
</template>
<script>
import resultComps from '../components/mock/index';
// 同理可以动态引入 图片
export default {
name: 'TextEP',
data () {
return {
comps: ['mock1', 'mock2'],
allComps: resultComps
}
}
}
</script>
<style lang="less" scoped>
img {
width: 100%;
}
</style>
mock1.vue
<template>
<div class="test-Prolo">
<div>马优晨测试试试~~~~</div>
<div class="test-border"></div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="less" scoped>
.test-Prolo {
background: #2c3e50;
}
.test-border {
height: 0.5rem;
position: relative;
}
.test-border:before {
content: "";
position: absolute;
top: -0.5rem;
left: 0;
width: 100%;
height: 1px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
transform: scaleY(0.5);
}
</style>
mock2.vue
<template>
<div class="test-Prolo">
<div>马优晨测试试试~~~~</div>
<div class="test-border"></div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="less" scoped>
.test-Prolo {
background: #2c3e50;
}
.test-border {
height: 0.5rem;
position: relative;
}
.test-border:before {
content: "";
position: absolute;
top: -0.5rem;
left: 0;
width: 100%;
height: 1px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
transform: scaleY(0.5);
}
</style>
index.js
const resultComps = {}
let requireComponent = require.context(
'./', // 在当前目录下查找
false, // 不遍历子文件夹
/\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {
let comp = requireComponent(fileName)
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps