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

问题描述

当我以打字稿（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>

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

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

并导入扩展名为.vue的组件：

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

而不是：

import Navigation from './components/Navigation';