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

Question

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

"Cannot find module './components/Navigation' or its corresponding type declarations (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>

Navigation.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
}

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

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

VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations

javascript

typescript

vue.js

vuejs2

vuejs3