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

Question

当我将脚本创建为 typescript (lang="ts") 时，我收到一条错误提示

“找不到模块 './components/Navigation' 或其对应的类型声明 (Vetur 2307)。”。

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

app.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，内容如下：

Vue 2：

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

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';