ts bug 找不到模块或相应类型的声明，@符有红色波浪线

茶茶只知道学习2025-05-07 13:30

解决方法：在env.d.ts文件中添加以下代码，这段代码是一个 TypeScript 的声明文件，用于让 TypeScript 知道如何处理 Vue 单文件组件（.vue 文件）的导入。

javascript 复制代码

/// <reference types="vite/client" />
// 声明一个模块,可以匹配任何以.vue结尾的文件
declare module '*.vue' {
  // 导入vue的defineComponent类型
  import { DefineComponent } from 'vue'
  // 定义一个常量component,类型为DefineComponent，DefineComponent 是 Vue 3 中的一个泛型类，
  // 接受三个类型参数，分别表示 Props、Emits 和 Slots 的类型。
  const component: DefineComponent<{}, {}, any>
  // 将这个 component 导出为默认导出。
  export default component
}

通过这个声明文件，可以确保在导入 Vue 单文件组件时，TypeScript 能够正确地推断组件的类型，并提供相应的代码提示和类型检查。

另一个bug:

路径正确，但是还是有红色波浪线，而且项目可以正常运行，ctrl+左键可以正常跳转，用相对路径就不报错，用@符号就报错，解决方案：

在tsconfig.json里配置：

"paths": {

"@/*": ["./src/*"]

}

javascript 复制代码

{
  "files": [],

  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ],
  "compilerOptions": {
// 进行如下配置
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

注意就算是在tsconfig.app.json里配置了也没用，要在tsconfig.json里进行相同配置才行。