VueJS/Typescript-找不到模块'./components/Navigation'或其对应的类型声明 [英] VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations

问题描述

当我将脚本创建为打字稿(lang ="ts")时，出现错误提示

When I create a script as typescript (lang="ts") I get an error stating

无法找到模块'./components/Navigation'或其相应的类型声明(Vetur 2307).".

"Cannot find module './components/Navigation' or its corresponding type declarations (Vetur 2307).".

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

I realized that this only happens when I set the lang as ts, which is what I need to build my Vue application.

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

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>

推荐答案

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

In the src folder add the file shims-vue.d.ts with the following content :

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 的组件:

and import the component with its extension .vue :

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

而不是:

import Navigation from './components/Navigation';

这篇关于VueJS/Typescript-找不到模块'./components/Navigation'或其对应的类型声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！