使用import.meta.glob批量导入路由

最近在学习 vite + vue3 做一些基础demo。 在vue2 项目中，可以使用 webpack 自带的 require.context 批量引入模块，就想在 vite + vue3 中尝试这个批量引入模块的功能。

vite的官方文档

现在遇到一个问题，由于 import.meta.glob 默认是懒加载的（项目也需要使用懒加载）。 但是这种懒加载的模块，使用 export default 不能导出为最新的值。

方式1：使用 promise (失败)

方式2：使用 await （OK）

链接：

vite中的批量导入import.meta.glob

vite中import.meta.glob的具体用法

附上代码

> 这是 src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import pageRouters from '@/router/routers/_index.js'

// * 导入所有router
const metaRouters = import.meta.glob("./modules/*.js");

// * 处理路由
const routerArray = []
for (const key in metaRouters) {
  const mod = await metaRouters[key]()
  routerArray.push(...mod.default)
    
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    ...routerArray
  ]
})

console.log('router',router)
export default router