Vue3 常见问题

约 370 字大约 1 分钟

2025-11-26

无法找到模块“*.vue”的声明文件

加一个 Vue 通配声明文件（最标准，一劳永逸！）

在项目根目录（或 src/types/ 下）新建一个文件，叫 vue.d.ts 或 shims-vue.d.ts：

文件名随便，但后缀必须是 .d.ts

推荐路径：src/shims-vue.d.ts 或 types/vue.d.ts 或直接根目录 vue.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

const component: DefineComponent<{}, {}, any>; 这行可以让 <script setup> 的类型推导更智能（Vue 3.3+）

然后确保 tsconfig.json 包含了它（一般默认就包含）：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.d.ts",                 // 加这行就万无一失
    "src/shims-vue.d.ts"      // 或者明确写路径
  ]
}

保存 → 重启 VS Code（Ctrl+Shift+P → Reload Window） → 所有 .vue 文件导入红线瞬间消失！

/// <reference types="vite/client" />

这行不是必须的，但建议也加上去

这行是 TypeScript 的三斜杠指令，作用是把 Vite 官方自带的类型声明一次性全部导入进来，里面包含了下面这些你平时“看不见但一直在用”的类型：

具体解决了什么问题（不加会报红/没提示）	例子
`import.meta.env.xxx` 的类型提示	`import.meta.env.VITE_APP_TITLE`
`import xxx from '.png'` / `.svg` 等静态资源的类型	`import logo from '@/assets/logo.png'`
`defineProps()` / `defineEmits()` 在 `<script setup>` 里的完整类型推导	`props: { msg: String }`
`.vue` 文件的正确类型（和 declare module '*.vue' 一起用）	-
`ref()` 自动脱 ref（Vue 3.4+ 的新特性）等	-