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