Vue懒加载组件文件时触发Module not found错误如何解决

问题根因 #

• 动态导入的路径不能为完全动态变量：Webpack/Vite等打包工具依赖静态路径分析做依赖收集，全动态拼接的路径无法被识别，导致打包时没有把对应组件纳入构建产物，运行时报找不到模块。
• defineAsyncComponent使用方式错误：defineAsyncComponent本身返回的就是符合<component :is>要求的异步组件包装器，无需使用async/await等待，await后拿到的是组件原始配置对象，反而会丢失异步加载的逻辑，触发模板缺失的警告。
• 动态绑定源错误：不要把getComponent()方法的执行结果直接绑定给:is，方法在每次组件渲染时都会重复执行，容易引发响应式失效、重复加载的问题。

修复代码 #

Vue3 版本 #

<template>
  <component :is="asyncComponent"></component>
</template>
<script>
import { defineAsyncComponent, computed } from 'vue'
export default {
  props: ['window'],
  computed: {
    asyncComponent() {
      // 保留固定路径前缀，仅将动态部分放在插值中，让打包工具可识别依赖范围
      return defineAsyncComponent(() => import(`@/components/pages/${this.window.component}.vue`))
    }
  }
}
</script>

Vue2 版本 #

<template>
  <component :is="asyncComponent"></component>
</template>
<script>
export default {
  props: ['window'],
  computed: {
    asyncComponent() {
      return () => import(`@/components/pages/${this.window.component}.vue`)
    }
  }
}
</script>

额外说明 #

控制台的sockjs相关报错和组件导入问题完全无关，属于开发环境热更新服务的WebSocket版本冲突问题，可通过删除node_modules文件夹、删除包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新安装依赖解决，无需和组件导入问题关联排查。

内容的提问来源于stack exchange，提问作者luis.ap.uyen