Quasar Router路由无法访问：动态导入模块失败求助

数据老陈

2026-8-4

Quasar Router 路由加载失败问题排查

我之前用过Vue Router，第一次用Quasar Router，以为两者基本一致，但配置完登录页和主页路由后，两个页面都访问不了，控制台报错：
Failed to fetch dynamically imported module: http://localhost:9000/src/layouts/MainLayout.vue

相关代码及文件结构

routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    // 主页
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/QuestionsPage.vue') },
    ],
  },

  {
    path: '/login',
    component: () => import('pages/LoginPage.vue'),
  },

  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

登录页（LoginPage.vue）

<script setup lang="ts"></script>

<template>
  <q-page padding>
    <h1>登录页</h1>
  </q-page>
</template>

主页（QuestionsPage.vue）

<script setup>
console.log('test');
</script>

<template>
  <q-page padding>
    <h1>主页</h1>
  </q-page>
</template>

文件结构

问题原因及解决方法

核心问题是Quasar的动态导入路径规则和纯Vue项目不同，直接用layouts/xxx.vue这类路径会导致模块找不到，按以下步骤修复：

修正路由导入路径：给所有组件导入路径加上@/前缀，指向项目src目录，修改后的routes.ts如下：

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('@/pages/QuestionsPage.vue') },
    ],
  },

  {
    path: '/login',
    component: () => import('@/pages/LoginPage.vue'),
  },

  {
    path: '/:catchAll(.*)*',
    component: () => import('@/pages/ErrorNotFound.vue'),
  },
];

export default routes;