语言服务实例冲突报错问题

vite vue3+ts

看那个红色报错真不舒服

报错提示：

找不到模块“./XXX.vue”或其相应的类型声明

报错原因：

VSCode 内置的 TS 语言服务只能理解 .ts 文件，无法理解 .vue文件

解决方法：

(一)声明xxx.d.ts文件

在vite-env.d.ts文件中写入：

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

但是这样点击组件名称就会导致ts跳转一直跳到那个声明文件，我们不这样解决

(二)Volar Takeover 模式

参考链接

volar-takeover-mode

为了让 Vue 单文件组件和 TypeScript 一起工作，Volar 创建了一个针对 Vue 的 TS 语言服务实例，将其用于 Vue 单文件组件。同时，普通的 TS 文件依然由 VSCode 内置的 TS 语言服务来处理。这也是为什么我们需要安装 TypeScript Vue Plugin 来支持在 TS 文件中引入 Vue 单文件组件。这套默认设置能够工作，但在每个项目里我们都运行了两个语言服务实例：一个来自 Volar，一个来自 VSCode 的内置服务。这在大型项目里可能会带来一些性能问题。

根本原因

其实本此报错的根本原因也就是我们运行了两个语言服务实例：一个来自 Volar，一个来自 VSCode 的内置服务。

为了优化性能，Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。

0. 在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。
1. 输入 built，然后选择“Extensions：Show Built-in Extensions”。
2. 在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
3. 点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。
4. 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。

完成上面的步骤本次报错就解决了