Vite 中通过 resolve.alias 配置路径别名可简化 import 路径，如将 @ 映射到 src 目录；需同步配置 tsconfig.json 的 baseUrl 和 paths 以支持 TypeScript 类型检查与 IDE 提示。
在 Vite 项目中，用 resolve.alias 配置路径映射，能避免写一长串 ../../../，让 import 更简洁清晰。
配置别名（alias）映射到 src 目录
Vite 默认不带路径别名，需手动在 vite.config.ts（或 .js）中设置。最常用的是把 @ 指向 src：
- 编辑
vite.config.ts，在resolve.alias中添加映射 - 推荐用
path.resolve确保路径准确，尤其跨平台时
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@components': resolve(__dirname, 'src/components'),
'@utils': resolve(__dirname, 'src/utils')
}
}
});
TypeScript 项目必须同步配置 typescript.json
否则 VS Code 和 tsc 会报“找不到模块”，Vite 运行没问题但开发体验差。
- 在
tsconfig.json的compilerOptions中加baseUrl和paths -
baseUrl设为"."，paths写法要和 alias 一致（支持通配符）
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}
别名支持动态段和通配符（进阶用法）
比如想让 @/api/users 自动解析到 src/api/users/index.ts，无需额外插件。
立即学习“Java免费学习笔记（深入）”；
- Vite 的 alias 是静态字符串替换，不支持正则，但
paths支持*通配 - 若需更灵活逻辑（如按环境切换路径），可用
resolve.alias函数式写法
resolve: {
alias: [
{
find: '@api',
replacement: process.env.NODE_ENV === 'development'
? resolve(__dirname, 'src/api/mock')
: resolve(__dirname, 'src/api/real')
}
]
}
验证是否生效的小技巧
别名配置后不生效？常见原因有三个：
- Vite 服务没重启：改完 vite.config.ts 必须重启 dev server
- TypeScript 缓存未刷新：VS Code 中按
Ctrl+Shift+P→ “TypeScript: Restart TS Server” - 路径拼写不一致：alias 键名（如
@）和paths中的前缀必须完全相同（含斜杠）
