vue如何利用require.context去获取项目目录信息

这篇文章主要介绍vue如何利用require.context去获取项目目录信息，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

利用 require.context 去获取项目目录信息

关于 require.context，webpack 文档是这么描述的：

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
webpack 会在构建中解析代码中的 require.context() 。如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助

根据这个提示，我们可以引用到一个文件夹下面的所有文件，由此可以利用获取的文件信息去做一些操作，比如在注册组件的时候，原本我们注册组件的时候需要一个个引入并且一个个注册，而且后面想加新的，又要再写上，现在可以通过 require.context 去优化这一段代码。

// import WmsTable from './wms-table/table/index';
import Table from './table/index.vue';
import CustomHooks from './custom-hooks/custom-hooks-actions/index';
import SFilter from './s-filter/filter-form';
import WButton from './button/index';
import CreateForm from './createForm/create-form/CreateForm.vue';
import Action from './table/action-table-column.vue';
import DetailItem from './detail-item.vue';


Vue.component('w-filter', SFilter);
Vue.component('w-button', WButton);
Vue.component('custom-hooks', CustomHooks);
Vue.component('create-form', CreateForm);
Vue.component('w-table', Table);
Vue.component('w-table-action', Action);
Vue.component('zonetime-date-picker', ZonetimeDatePicker);
Vue.component('detail', DetailItem);

注册全局组件的时候，不需要一个一个 import，和一个个去注册，使用 require.context 可以自动导入模块，这样的好处在于，当我们新建一个组件，不用自己再去手写注册，而在一开始就帮我们自动完成。

const contexts = require.context('./', true, /\.(vue|ts)$/);
export default {
  install (vm) {
    contexts.keys().forEach(component => {
      const componentEntity = contexts(component).default;
      if (componentEntity.name) {
        vm.component(componentEntity.name, componentEntity);
      }
    });
  }
};

以上是“vue如何利用require.context去获取项目目录信息”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！