TypeScript 项目中 Vite 模块解析需两端协同配置：Vite 的 resolve.extensions 控制运行时导入查找顺序，TS 的 tsconfig.json 需配置 include、baseUrl/paths 和类型声明（如 vite-env.d.ts）以支持 .vue/.json 等扩展名的类型检查与路径别名解析。
在 TypeScript 项目中使用 Vite 时，模块解析的扩展名白名单需要**两端协同配置**：Vite 负责运行时模块解析（开发和构建阶段），TypeScript 负责编译期类型检查和路径补全。只配一端会导致编辑器报错或导入失败。
1. Vite 配置 extensions（运行时解析）
Vite 的 resolve.extensions 决定它在 import 时尝试哪些后缀来查找文件。默认不包含 .vue，所以必须显式添加：
- 在
vite.config.ts或vite.config.js的resolve选项中设置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
})
- 顺序很重要：Vite 按数组顺序依次尝试扩展名，建议把最常用、最明确的放前面（如
.ts在.js前） - 若用 Vue 单文件组件，
.vue必须加入，否则import Comp from '@/components/Hello'会找不到文件
2. TypeScript 配置 typescript → tsconfig.json（编译期识别）
TypeScript 编译器本身不依赖 extensions，但它需要知道哪些文件属于项目范围，并能正确解析路径别名（如 @/）。关键配置在 tsconfig.json：
-
"include"或"files"确保.vue文件被纳入类型检查（Vue 项目需含"src/**/*.d.ts"和"src/**/*.vue"） - 启用
"resolveJsonModule": true才能 import JSON；启用"allowJs": true才能 import JS（按需开启） - 若使用路径别名（如
@/），必须同步配置"baseUrl"和"paths"，否则 TS 报“无法找到模块”
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"resolveJsonModule": true,
"esModuleInterop": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}
3. Vue 项目额外注意：声明 .vue 类型
TypeScript 默认不认识 .vue 文件，需通过类型声明告诉它：
- 确保项目中有
src/vite-env.d.ts（Vite CLI 初始化自动生成），内容应包含：
/// <reference types="vite/client" />
- 该声明会自动引入
vite/client.d.ts，其中定义了*.vue的模块类型，使import xxx from './xxx.vue'可被 TS 正确识别 - 若缺失此声明，即使 Vite 能加载 .vue，TS 编辑器仍会标红并提示“找不到模块”
4. 验证是否生效
配置完成后，测试以下几种导入方式是否无报错且可跳转：
-
import { foo } from '@/utils/index'（省略.ts） -
import Comp from '@/components/Hello'（省略.vue） -
import data from '@/assets/config.json'（省略.json，需resolveJsonModule: true）
