Vue.js + Vite动态导入模块失败问题排查求助

核心问题 #

你遇到的报错本质是：Vite无法静态识别动态拼接的import()路径，导致对应组件没有被打包进生产构建产物。线上请求时，服务器找不到对应的组件资源，会返回SPA的index.html（MIME类型为text/html），而浏览器期望的是JavaScript模块，因此触发MIME类型不匹配的错误。

你的路由代码中，component: () => import(pathComponent)是动态拼接字符串的导入方式，Vite的静态分析器无法提前识别这些路径，所以不会把这些组件打包到生产环境中。

解决方案：使用Vite的import.meta.glob预加载组件 #

Vite提供了import.meta.globAPI，可以批量预加载指定目录下的所有组件，让打包工具能静态分析到所有需要的资源。修改你的路由代码如下：

import { createRouter, createWebHistory } from "vue-router";
import TopMenu from "../layouts/top-menu/Main.vue";

import Login from "../views/admin/login/Main.vue";
import Home from "../views/admin/home/Main.vue";
import Exit from "../views/admin/exit/Main.vue";

import hosts from "@/utils/hosts";

// 预加载views目录下所有.vue组件，Vite会静态分析这些路径并打包对应的文件
const allViews = import.meta.glob('../views/**/*.vue');

async function createRouterInstance() {
  var data = await searchRoutes();
  let lstRota = [
    {
      path: `${hosts.app}/home`,
      name: "Home",
      component: Home,
    },
    {
      path: `${hosts.app}/exit`,
      name: "Exit",
      component: Exit,
    },
  ];

  for (var i = 0; i < data.length; i++) {
    let dsPath = `${hosts.app}/${data[i].pagename}`;
    // 构建与预加载路径完全匹配的key
    let componentPath = `../views/${data[i].path}/${data[i].pagename}.vue`;

    lstRota.push({
      path: dsPath,
      name: data[i].pagename,
      // 从预加载的组件映射中获取对应的工厂函数
      component: allViews[componentPath],
    });
  }

  let routes = [
    {
      path: `${hosts.app}/`,
      name: "Login",
      component: Login,
    },
    {
      component: TopMenu,
      children: lstRota,
    },
  ];

  const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
      return savedPosition || { left: 0, top: 0 };
    },
  });

  return router;
}

export default await createRouterInstance();

关键注意事项 #

• 路径一致性：确保data[i].path和data[i].pagename拼接后的路径，与实际项目中组件文件的路径完全一致（包括大小写，部分线上服务器区分文件名大小写）。
• import.meta.glob的匹配规则：../views/**/*.vue会匹配views目录下所有子目录中的.vue文件，如果你有特定的目录范围，可以调整匹配模式（比如../views/reports/**/*.vue）。
• 为什么之前的尝试无效：升级Vite版本、切换hash模式、移除.vue后缀，这些操作都没有解决Vite无法静态识别动态拼接导入路径的核心问题，因此错误会持续存在。

内容的提问来源于stack exchange，提问作者Robinho de Morais