Vue3+Vite+Vue-router多级路由动态导入报错求解决方案

问题分析 #

你遇到的核心问题是Vite的静态资源分析机制与Webpack不同：Vite要求动态导入路径必须包含固定前缀，无法直接使用完全动态的路径（如../src/views/${item.component}/index.vue），而Webpack的上下文导入允许更灵活的动态路径。此外你的代码中还存在路径错误（publicRoutes里的../src/views应为../views，否则会指向不存在的src/src/views目录）。

解决方案：使用import.meta.glob预加载视图文件 #

Vite提供了import.meta.globAPI，可以静态分析并预加载指定目录下的所有匹配文件，完美适配多级路由的动态导入需求。

步骤1：预加载所有视图组件 #

在router/index.ts中，先通过import.meta.glob预加载views目录下所有层级的index.vue文件：

import { createRouter, createWebHistory } from 'vue-router'
import AuthenticatedLayout from '../layouts/AuthenticatedLayout.vue'
import { authenticatedRoutes, publicRoutes } from './routes'

// 预加载views目录下所有层级的index.vue，{ eager: false }表示按需懒加载
const viewModules = import.meta.glob('../views/**/index.vue', { eager: false })

步骤2：修改路由组件导入逻辑 #

遍历路由配置时，直接从预加载的模块对象中匹配对应的组件：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: AuthenticatedLayout,
      children: authenticatedRoutes.map(item => ({
        ...item,
        // 从预加载模块中获取对应组件
        component: viewModules[`../views/${item.component}/index.vue`]
      }))
    },
    ...publicRoutes.map(item => ({
      ...item,
      // 修正路径错误，直接使用预加载模块匹配
      component: viewModules[`../views/${item.component}/index.vue`]
    }))
  ]
})

export default router

步骤3：保持路由配置的component字段格式 #

你的router/routes.js配置无需修改，component字段保持目录路径格式即可：

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

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

原理说明 #

• import.meta.glob('../views/**/index.vue', { eager: false })会让Vite在构建时扫描views目录下所有层级的index.vue文件，并生成一个键为文件路径、值为导入函数的对象。
• 后续动态匹配时，本质是从已预加载的模块中获取对应导入函数，完全符合Vite的静态分析要求，既支持多级目录，也能正常完成生产构建。

内容的提问来源于stack exchange，提问作者user3692459