VueJS/Typescript - 找不到模块“./components/Navigation”或其相应的类型声明

Question

当我将脚本创建为打字稿 (lang="ts") 时，我收到一条错误消息

“找不到模块‘./components/Navigation’或其相应的类型声明（Vetur 2307）。”。

我意识到这只有在我将 lang 设置为 ts 时才会发生，这正是我构建 Vue 应用程序所需要的。

应用程序

<template>
  <Navigation />
</template>

<script lang="ts">
import Navigation from './components/Navigation'; // This is where I get the error message

export default {
  name: 'app',
  components: {
    Navigation,
  }
}
</script>

导航.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> 
    <router-link to="/about">About</router-link> 
    <router-link to="/categories">Categories</router-link> 
    <router-link to="/random">Random</router-link>
  </div>
  <router-view />
</template>

<script lang="ts">
export default {
  name: 'Navigation',
}
</script>

Answer 1

在src文件夹中添加shims-vue.d.ts具有以下内容的文件：

视图 2：

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

视图 3：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

并导入组件及其扩展名.vue：

 import Navigation from './components/Navigation.vue';

代替 ：

import Navigation from './components/Navigation';