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

Posted 2023-02-23

【中文标题】在 Typescript 文件中导入时找不到 Vue 模块

【英文标题】：Vue modules not found when importing in a Typescript file

【发布时间】：2018-04-23 13:25:57

【问题描述】：

我有一个使用单文件类组件和打字稿加载器的 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 文件）

【参考方案1】：

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

但是有一个解决方法。

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

在里面放如下代码：

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

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

【讨论】：

谢谢，但 .d.ts 文件会导致 Vetur 插件出现故障（处理 .vue 文件需要该插件）。添加类型定义文件后，智能感知变得非常有问题，Vetur 中不再识别模块路径。

即使这样它也不起作用，它甚至无法导入非 ts .vue 文件。而且它是有选择性的，有些文件可以工作，有些则不能。