Vue CLI迁移Vite后vue-router懒加载加载状态失效排查

核心原因 #

1. 异步导入使用错误：原代码中loading和error直接赋值为import().default，但import()是异步操作，返回的是Promise而非组件实例。Vue CLI基于Webpack的特殊处理会自动解析这个Promise，但Vite严格遵循ES模块规范，不会自动处理，导致加载/错误组件无法被识别渲染。
2. 冗余的函数式组件包装：原代码将异步组件配置包裹在返回Promise的函数式组件中，这完全没必要，反而干扰了vue-router对异步组件配置的正常解析。

修正后的代码 #

方案1：同步导入加载/错误组件（推荐）

因为加载器和错误提示组件体积极小，无需懒加载，直接同步导入即可：

// 同步导入通用加载组件
import Loader from "./components/loaders/loader.vue";
// 同步导入通用错误组件
import ErrorView from "./components/loaders/error.vue";

function lazyLoadView(AsyncView) {
  // 直接返回vue-router支持的异步组件配置对象
  return () => ({
    component: AsyncView,
    loading: Loader,
    error: ErrorView,
    delay: 1,
    timeout: 2,
  });
}

// 路由配置调整：直接传入lazyLoadView处理后的函数
const routes = [
  {
    path: "/foo/",
    component: lazyLoadView(() => import("./components/bar.vue")),
  }
];

方案2：异步加载加载/错误组件（仅特殊场景使用）

如果必须异步加载这两个组件，需用Vue的defineAsyncComponent包裹：

import { defineAsyncComponent } from 'vue';

// 用defineAsyncComponent包装异步导入的组件
const AsyncLoader = defineAsyncComponent(() => import("./components/loaders/loader.vue"));
const AsyncError = defineAsyncComponent(() => import("./components/loaders/error.vue"));

function lazyLoadView(AsyncView) {
  return () => ({
    component: AsyncView,
    loading: AsyncLoader,
    error: AsyncError,
    delay: 1,
    timeout: 2,
  });
}

// 路由配置同上
const routes = [
  {
    path: "/foo/",
    component: lazyLoadView(() => import("./components/bar.vue")),
  }
];

验证要点 #

• 检查网络面板：目标组件bar.vue应正常加载，加载/错误组件在触发条件时（如超时、加载失败）会正确渲染。
• 确认路由配置中的component是返回异步组件配置的函数，而非返回Promise的函数。

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