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

Question

我有一个使用单文件类组件和打字稿加载器的 Vue 项目。我将 VS Code 与 Vetur 插件结合使用，在单文件 .vue 组件中获得非常好的代码补全。除了在我的 Entry.ts 文件中（我在其中创建根 Vue 组件）之外，这一切都很好：

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

索引.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

应用程序.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 文件。