在 Typescript 文件中导入时找不到 Vue 模块

Question

我有一个使用单文件类组件和打字稿加载器的 Vue 项目。我使用 VS Code 和 Vetur 插件在单个文件 .vue 组件中获得非常好的代码完成。除了在我创建根 Vue 组件的 entry.ts 文件中之外，这工作正常：

在 entry.ts 中，我无法导入 vue 模块！

index.ts

import Vue from 'vue'                       // this is ok
import App from './components/app.vue'      // vue file not found!
new App({el : '#app'})

ERROR Cannot find module './components/app.vue

app.vue

<script lang="ts">
    import Vue from 'vue'                       // this is ok
    import Card from "./card.vue"               // here it works!

    export default class App extends Vue {
    }
</script>

从.vue 文件，我可以导入其他.vue 模块。

我曾尝试省略 .vue 扩展名，但结果相同。

我尝试将.vue 扩展名添加到.d.ts 文件中，但这会弄乱 Vetur 插件，并解决问题（模块仅适用于 .ts 文件，但不适用于 .vue 文件）

Answer 1

嗨，Typescript 会给你这个错误，因为它不知道 .vue 文件是什么。

但是有一个解决方法。

在您的项目目录中，您可以添加一个名为vue-shims.d.ts的文件

在里面放如下代码：

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

现在 typescript 可以理解 .vue 文件了。