typescript + vite 项目配置路径别名需同步完成 vite 运行时解析与 typescript 类型识别：vite.config.ts 中用绝对路径（如 resolve(__dirname, 'src')）声明 alias，tsconfig.json 中配置 baseurl 和 paths 映射，并重启开发服务器与 ts 服务验证。
在 TypeScript + Vite 项目中配置路径别名，核心是两步：Vite 运行时解析别名 + TypeScript 类型系统识别别名。只配一边会导致开发体验断层——比如代码能跑但编辑器报错、跳转失效，或反之。
在 vite.config.ts 中正确声明别名
必须用 绝对路径，不能写相对路径（如 '@': './src'）或斜杠开头路径（如 '@': '/src'），否则跨平台或插件兼容性出问题。
- 推荐用
resolve(__dirname, 'src')（需导入path）或fileURLToPath(new URL('./src', import.meta.url))（无需额外依赖） - 常见别名示例：
'@': resolve(__dirname, 'src')'@assets': resolve(__dirname, 'src/assets')'@utils': resolve(__dirname, 'src/utils')
- 修改后需重启 Vite 开发服务器，别名才会生效
同步配置 tsconfig.json 让 TS 识别别名
Vite 的 alias 只影响运行时打包，TypeScript 编译和 IDE（如 VS Code）补全/跳转依赖 tsconfig.json 中的 paths 配置。
- 确保
"baseUrl": "."已设置（表示以项目根目录为基准） - 对应添加
paths映射，格式要严格匹配：-
"@/*": ["src/*"]→ 对应@/components/Button.vue -
"@assets/*": ["src/assets/*"]→ 对应@assets/logo.png
-
- 配置完建议重启 TS 服务（VS Code 中可按
Ctrl+Shift+P→ “Restart TS server”）
必要前提：安装 @types/node
若项目未安装 Node 类型定义，path 或 __dirname 可能报错。
- 执行：
npm install -D @types/node - 安装后会自动支持
path.resolve、__dirname等 API，避免类型错误
验证是否成功
改完两个配置后，测试三件事：
- 在组件中写
import utils from '@/utils/index'—— 应不报红、能正常运行 - 按住 Ctrl（或 Cmd）点击该 import 路径 —— 应能直接跳转到目标文件
- 在 TS 文件中输入
import '@/—— 应出现src/下的文件结构提示
