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+ 的新特性）等 | - |