未知变量动态导入

Question

我有一个带有 Vite 和 vue-router 的 vue 3 应用程序，我在其中使用动态导入来分割路由以更好地组织。这是代码。

路由器/index.ts

import { authenticatedRoutes,publicRoutes } from './routes'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: AuthenticatedLayout,
      children:[
        ...authenticatedRoutes.map((item) => ({
          ...item,
          component: () => import(`../views/${item.component}/index.vue`)
        }))
      ]
    },
    ...publicRoutes.map((item) => ({
      ...item,
      component: () => import(`../src/views/${item.component}/index.vue`)
    }))
  ]
})

路由器/routes.js

export const authenticatedRoutes = [
    {
        path: '/',
        name: 'home',
        component: 'home',
    }
]

export const publicRoutes = [
    {
        path: '/test',
        name: 'material-design2',
        component: 'test/test2'
    }

现在我想创建一个结构，我可以在路由结构中深入 n 层，以便对它们进行组织，这里的组件指定目录路径，这样我们就可以拥有尽可能多的目录嵌套。

现在的问题是Vite抛出错误

Unknown variable dynamic import: ../src/views/test/test2/index.vue

现在我知道 Vite 只处理最多一级的动态导入，如文档中提到的这里 为了解决这个问题，我尝试了 / import 方法

component: () => import(`/src/views/${item.component}/index.vue`)

最终在本地工作，但在生产构建中崩溃了，在文档here中也提到了它，它说你只能使用./或../

导入

有没有办法利用Vite来实现这个架构？我知道这适用于 webpack，因为我之前使用过它。

Answer 1

不好的做法：

// provide a exact file Level but not n-Level
const modules = import.meta.glob("../views/**/**/**/**/index.vue");
routes: [
{
  path: '/',
  name: 'home',
  component: AuthenticatedLayout,
  children:[
    ...authenticatedRoutes.map((item) => ({
      ...item,
      component: modules[`../views/${item.component}/index.vue`]
    }))
  ]
},

最佳实践：

export const authenticatedRoutes = [
{
    path: '/',
    name: 'home',
    component: () => import(`../views/home/index.vue`) 
}
]

...

    routes: [
{
  path: '/',
  name: 'home',
  component: AuthenticatedLayout,
  children:authenticatedRoutes
},