require.context的使用

require.context的使用

• require.context(directory,useSubdirectories,regExp)

directory: 表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp: 匹配文件的正则表达式,一般是文件名

例如 require.context(“@/views/components”, false, /.vue$/)

• eg: vue router路由

import Vue from "vue";
import VueRouter from "vue-router";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";
Vue.use(VueRouter);

const routes = [];
const requireComponent = require.context("../views", true, /index.vue$/);
console.log("xxx", requireComponent.keys());

requireComponent.keys().forEach((fileName) => {
  //转换字符串string的首字母为大写
  const componentName = upperFirst(
    //转换字符串string为驼峰写法。
    camelCase(
      fileName
        .split("/index")
        .shift()
        .replace(/\.\w+$/, "")
    )
  );
  routes.push({
    //将字符串转换为小写:
    path: `/${componentName.toLocaleLowerCase()}`,
    name: componentName,
    component: () => import(`@/views/${componentName}/index.vue`),
    // meta: { title: ComponentConfig.title ? ComponentConfig.title : (new ComponentConfig()).title }
  });
  console.log("routes", routes);
});
routes.unshift({
  path: "/",
  redirect: "/homepage",
});
const router = new VueRouter({
  mode: "hash",
  base: "/test/",
  routes,
});
export default router;