vue-router动态加载异步组件时模块存在却提示找不到如何解决

Webpack 编译阶段会静态分析所有 require/import 引入的依赖，纯变量形式的传入路径 Webpack 无法识别需要打包哪些资源，会导致目标组件没有被打包进产物，运行时就会抛出找不到模块的错误。

方案1：动态路径加静态前缀（快速适配） #

这个方案只需要改两处代码即可生效：

1. 调整后端接口返回的 component 字段值：不要返回完整路径（比如../views/Dashboard.vue），只返回相对于views目录的相对路径，比如Dashboard.vue、system/User.vue
2. 修改require写法，明确加入静态路径前缀，让Webpack可以识别依赖范围，提前把views目录下所有.vue文件打包：

_routes.push({
    path: path,
    name: e.name,
    component: function(resolve) {
        require([`../views/${e.component}`], resolve);
    }
})

注意：如果项目views目录下文件很多，这个方案会增大首屏打包体积，适合中小型项目使用。

方案2：预定义组件映射表（更安全、体积可控）推荐 #

提前把所有允许作为动态路由加载的组件注册到映射表中，后端接口只需要返回对应组件的key即可，既可以避免路径注入风险，也能精准控制需要打包的组件：

1. 先定义组件映射表：

// 路由文件顶部提前定义
const componentMap = {
  'Dashboard': resolve => require(['../views/Dashboard.vue'], resolve),
  'User': resolve => require(['../views/system/User.vue'], resolve),
  'Role': resolve => require(['../views/system/Role.vue'], resolve),
  // 把所有可能用到的动态路由组件全部在此处注册
}

2. 后端接口返回的component字段传对应key值，比如Dashboard
3. 动态生成路由时直接从映射表取组件：

_routes.push({
    path: path,
    name: e.name,
    component: componentMap[e.component]
})

• 你当前的getMenu函数用了await关键字，但函数没有声明async，会抛出语法错误，需要把函数定义改为async function getMenu()
• 生成路由数组后，vue-router 3.x 版本调用router.addRoutes(_routes)注入路由，vue-router 4.x 版本需要遍历数组逐个调用router.addRoute(routeItem)注入

内容的提问来源于stack exchange，提问作者Indrawan Dwi Prasetyo