如何批量导入组件，并在vue-router中批量设置？

import auth from './auth'
import App from './components/App.vue'
import About from './components/About.vue'
import Dashboard from './components/Dashboard.vue'
import Login from './components/Login.vue'

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/about', component: About },
    { path: '/dashboard', component: Dashboard, beforeEnter: requireAuth },
    { path: '/login', component: Login },
    { path: '/logout',
      beforeEnter (to, from, next) {
        auth.logout()
        next('/')
      }
    }
  ]
})

如上所示，在main.js中，需要多少个页面，就得Import几次，routes中设置几次。假设页面多达数十上百，则太过繁琐，有无批量设置的办法呢？

搜索后的结果，vue官网，等等，皆指出可利用webpack提供的require.context()接口，批量导入

//如果你恰好使用了 webpack (或在内部使用了 webpack 的 Vue CLI //3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组//件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入//基础组件的示例代码：
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]w+.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/.w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

//把上面的代码保存为单独的globalcomponentsjs文件，在main.js中导入

import './globalcomponentsjs'

//此时，在app.vue中，可直接使用那些组件，比如导入了About.vue
<About/>

//遗憾的是，这样导入的组件，在routes中，无法使用

-----------------------------------------------------------------------------------------分割线------------------------------------------------------------------

官网的办法，无法解决在router中批量导入组件的问题，搜索后，终于找到答案：

//https://segmentfault.com/q/1010000015301741
//答案引用地址见上面
//再一次提到require.context,按照一定结构去放对应文件就可以，可以适当
//改变路由定义，支持懒加载
const routes = [
    { path: '*', redirect: '/index' }
  ];
 importPages(require.context('./views', true, /.vue$/,'lazy'))
 function importPages (r) {
    r.keys().forEach(key => {
      routes.push({ path: (key.split('.'))[1], component: ()=>r(key)})
    });
  }