resolve.alias是解决多层相对路径最直接有效的方式，需在vite.config.ts中用path.resolve配置别名映射，并在tsconfig.json中同步设置baseUrl和paths，二者缺一不可，否则IDE跳转失效、类型报错。
在 Vite 项目中，resolve.alias 是解决多层相对路径（比如 ../../../../utils/api.ts）最直接有效的方式。它不改变代码逻辑，只让构建工具和编辑器“认得”简短别名，把路径映射到实际目录，从而提升可读性、减少出错、加快开发节奏。
核心配置：两处必须同步设置
别名生效需要构建工具（Vite）和类型系统（TypeScript）共同支持，缺一不可：
-
Vite 配置：告诉打包器和开发服务器如何解析
@/xxx这类写法； - TypeScript 配置：让 VS Code、WebStorm 等编辑器能跳转、补全、不报红。
vite.config.ts 中配置 resolve.alias
使用 path.resolve(__dirname, 'src') 生成绝对路径，推荐写法（兼容性好、语义清晰）：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@assets': resolve(__dirname, 'src/assets'),
'@components': resolve(__dirname, 'src/components'),
'@utils': resolve(__dirname, 'src/utils'),
'@api': resolve(__dirname, 'src/api')
}
}
})
注意：
– 不要用 '@': './src' 或 '@': '/src'，前者是相对路径易出错，后者在某些插件下行为不稳定；
– __dirname 指向 vite.config.ts 所在目录（即项目根目录），resolve 保证路径跨平台安全；
– 修改后需重启开发服务器才能生效。
tsconfig.json 中补充 paths 映射
仅配 Vite 别名，IDE 仍会提示“找不到模块”，必须同步配置 TypeScript：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@api/*": ["src/api/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "vite.config.ts"]
}
关键点：
– "baseUrl": "." 是前提，否则 paths 不生效；
– 键（如 @/*）要和 vite.config.ts 中的 alias 键完全一致；
– 值（如 ["src/*"]）是相对于 baseUrl 的路径，不是绝对路径；
– 配完建议重启 TS 语言服务（VS Code 中按 Ctrl+Shift+P → “TypeScript: Restart TS server”）。
日常使用与注意事项
配置完成后，所有导入都可大幅简化：
-
import api from '@/api/user'→ 替代import api from '../../../api/user'； -
import Icon from '@/components/Icon.vue'→ 清晰表达来源，不依赖文件位置； - 支持自动补全、Ctrl+点击跳转、重命名自动更新引用（前提是 TS 配置正确）。
常见陷阱：
– 别名键末尾带斜杠（如 '@/': ...）会导致匹配失败，应写 '@'；
– paths 中用了 src/*，但实际目录是 src/pages，则必须确保路径存在且拼写准确；
– 新增别名后未重启编辑器或 dev server，容易误判配置失败。
