通常,我们在引入并注册组件时,会选择这样做
这种做法看似没有问题,组件少的时候其实并不会显得麻烦和累赘,但是当组件不断增多,这种写法就显得有点“傻”。
我们可以用require.context解决这个问题
require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则
mode:加载模式,同步/异步
我们来改造一下上边的例子
// 从@/components/Login目录下加载所有.vue后缀的组件
const files = require.context('@/components/Login', false, /\.vue$/);
const components = {};
// 遍历files对象,构建components键值
files.keys().forEach(key => {
components[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default
});
export default {
...
components, // ES6语法糖,代表 components: components,
...
}
除此之外,也常用在vuex中加载module
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/
const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach(key => {
if (key === './index.js') return
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default modules