在 Vite 中配置别名路径需在 vite.config.ts 的 resolve.alias 中设置绝对路径映射（如 {'@': path.resolve(__dirname, 'src')}），并同步在 tsconfig.json 的 compilerOptions.paths 和 baseUrl 中配置以支持 TypeScript 类型提示，最后通过导入验证、构建检查和 Sources 面板确认生效。
在 Vite 中配置别名路径，核心是通过 vite.config.ts（或 .js）里的 resolve.alias 选项，把常用目录映射成简短前缀，比如用 @/components 代替冗长的相对路径 ../../../components。
配置 resolve.alias 映射路径
在 vite.config.ts 的 defineConfig 中添加 resolve.alias，使用绝对路径（推荐基于 path.resolve）指向项目目录：
- 用
__dirname或process.cwd()确保路径正确，避免跨平台问题 - 别名键名结尾加
/（如'@/'），可匹配子路径；不加则只精确匹配该字符串 - 常见写法：
{ '@': path.resolve(__dirname, 'src') }，这样@/utils/request就等价于src/utils/request
同时适配 TypeScript 类型提示
仅配 Vite 别名，TS 编译器和编辑器（如 VS Code）可能无法识别，需同步配置 tsconfig.json 的 compilerOptions.paths：
- 在
tsconfig.json的compilerOptions下添加："paths": { "@/*": ["src/*"] } - 确保
baseUrl设为"."，否则paths不生效 - 改完后重启 TS 服务（VS Code 中可按
Ctrl+Shift+P→ “Restart TS server”）
支持多层级别名与动态路径
除了基础 @，还可按需定义语义化别名，提升可读性：
立即学习“Java免费学习笔记（深入）”；
- 例如：
{ '@api': path.resolve(__dirname, 'src/api'), '@assets': path.resolve(__dirname, 'src/assets') } - 如果项目有多个包（monorepo），可用
path.resolve(__dirname, '../packages/utils')指向外部目录 - 注意：别名值必须是绝对路径，不能用
./或../
验证是否生效
配置完成后，可通过几种方式快速验证：
- 在代码中尝试
import { xxx } from '@/components/Button.vue'，看是否无报错且能跳转 - 运行
vite build，检查打包输出路径是否正常解析（别名不会出现在最终产物中） - 打开浏览器开发者工具，在 Sources 面板查看源码路径，确认映射已正确展开
