Vite中Vue Router懒加载报错Unknown variable dynamic import原因咨询

核心差异来自Vite和Vue CLI的底层打包逻辑不同 #

Vue CLI底层依赖Webpack，而Vite基于ESBuild和Rollup实现，二者对动态import()的静态分析规则存在明显区别：

• Webpack处理带变量的动态导入语法import(@/views/settings/${view}.vue)时，会自动扫描@/views/settings/目录下所有.vue文件，提前完成代码分割和别名@的路径替换，运行时无论传入什么参数都能匹配到对应模块。
• Vite的动态导入依赖编译阶段的静态分析，要求导入路径必须包含足够的静态信息：
  1. 不能将完全可变的参数作为动态导入的唯一变量，你将导入逻辑封装在getView函数中，参数view完全可变，Vite在编译阶段无法预判你会传入的参数值，也就无法提前完成@别名到实际路径的替换。
  2. 原生ES模块本身不识别@前缀的路径，必须在编译阶段替换为/src这类实际路径才能被浏览器识别，Vite无法分析函数内部的动态路径，就不会做别名替换，导致运行时直接请求@/views/settings/MyProfile.vue这个不存在的路径，抛出找不到模块的错误。

为什么直接写导入语句可以正常运行 #

当你直接写() => import('@/views/settings/MyProfile.vue')时，路径是完全静态的，Vite在编译阶段就能识别到@别名，直接替换为对应的实际路径，浏览器请求的路径是正确的，自然不会报错。

如果你想保留封装写法，可以使用Vite提供的import.meta.globAPI批量导入目标目录的组件： #

import store from "./../../store/index.js";
// 预导入settings目录下所有vue组件
const viewModules = import.meta.glob('@/views/settings/*.vue')

function getView(view) {
  // 注意glob返回的key是项目根目录开始的绝对路径，需要和你的实际路径匹配
  return viewModules[`/src/views/settings/${view}.vue`]
}

const routes = [
  {
    path: "/myProfile",
    name: "MyProfile",
    component: getView("MyProfile"),
    beforeEnter: (to, from, next) => {
      document.title = "Profile - " + store.getters.getAppName;
      if (store.getters["userStore/authenticated"]) {
        next();
      } else {
        next({ name: "Home" });
      }
    },
  }
]
export default routes;

内容的提问来源于stack exchange，提问作者Kasun Sampath Weligamage