实现vue动态异步组件遇到Cannot find module

Question

问题描述

根据大佬的思路来实现动态异步组件的时候出现了如下报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
        return {
          component: __webpack_require__("./src/components lazy recursive ^.*$")("".concat(_this.path))
        };
      }
Reason: Error: Cannot find module '@/components/HelloWorld.vue'

问题出现的环境背景及自己尝试过哪些方法

vue-cli create一个新项目即可

相关代码

app.vue

<template>
  <div>
    <async-component :path="path"></async-component>
  </div>
</template>

<script>
import AsyncComponent from './components/AsyncComponent'

export default {
  name: 'app',
  data(){
    return {
      path: ''
    }
  },
  components: {
    AsyncComponent
  },
  mounted(){
    setTimeout(() => {
      this.path = '@/components/HelloWorld.vue'
    }, 2000)
  }
}
</script>

在components下新建asyncComponent.vue组件

<template>
  <component :is="comp"></component>
</template>

<script>

export default {
  props: {
    path: {
      type: String,
      require: true,
      default: ''
    }
  },
  data(){
    return {
      comp: null,
    }
  },
  methods: {
    render() {
      this.comp = () => ({
        component: import(`${this.path}`)
      })
    }
  },
  watch: {
    path(newVal) {
      this.render()
    }
  }
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

期待结果两秒后页面展示HelloWorld
实际结果找不到该组件

补充：后来发现把asyncComponent中import方法改动一下就好了，实在是不解，
感觉两者没啥不同啊？挠头，求大神指点，跪谢！

component: import(`@/${this.path}`)

app.vue

  mounted(){
    setTimeout(() => {
      this.path = 'components/HelloWorld.vue'
    }, 2000)
  }

Answer 1

自己查了一下webpack文档，终于明白了，import方法中必须要有模块所在位置的信息，webpack好将其已知路径下的模块绑定到chunk中，在运行时才能使用该路径下的各个模块，否则就会出现Cannot find module的错误。涨知识了。。。吐槽一下，在中文文档竟然没有找到这一段描述，还是翻看英文文档找到的