require.context 动态加载

动态组件

vue的动态组件是使用 component 完成的，项目是流程系统，每支流程的表单界面不一样,根据流程key动态加载自己的vue页面；

<component :is="form" />

使用require.context 完成

function loadFiles(files) {
  const modules = {};
  files.keys().forEach((key) => {
    // 子目录替换为“.”号
    const moduleKey = key.replace(/(\.\/|\.vue)/g, '').replace(/\//g, '.');
    modules[moduleKey] = files(key).default;
  });
  return modules;
}
// 动态加载所有forms文件夹下表单组件
const forms = loadFiles(require.context('./forms', true, /\.vue$/));

export default { ...forms };

说明

require.context 参数

• 参数1：搜索的目录，是静态的，不可以是变量，因为编译期无法确定变量值，因此表达式不使用；
• 参数2：bool类型，是否搜索子目录；true 是搜索子目录；
• 参数3：匹配文件的正则表达式；

返回值

返回一个对象，包括三个属性：resolve, keys, id

• resolve 是一个函数，它返回请求被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
• id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到。