vue3 ts方式引入自己的组件报错 Cannot find module ‘xxx‘ or its corresponding type declarations

子组件:

<script lang="ts">
export default {
  name: "child",
};
</script>
 
<template>
  <div>我是子组件</div>
</template>

父组件(引入子组件):

<script lang="ts">
const Child = () => import("./components/child");// Cannot find module './components/child' or its corresponding type declarations.
 
export default {
  name: "Father",
  components: {
    Child
  }
};
</script>
 
<template>
    <div>
        <h1>父组件<h1>
        <Child />
    </div>
</template>

如上就会报错说没有找到这个模块或者没有正确的申明模块类型.

原因
因为我们给父子组件都申明了js作为typescript文件处理(script lang=“ts”), 然后在入口目录中能看到shims-vue.d.ts这个申明文件, .vue文件都有申明的. 而如上的父子组件都是vue文件, 为什么还会报错?是因为import的地址不完整!

解决办法

父组件:

// 父组件引入子组件的正确写法:
const Child = () => import("./components/child.vue"); //加上[.vue]这个后缀!!!