TSConfig 路径别名（Vite/Vue）最小可用配置

TL;DR

如果你只想要 @/xxx 这种路径别名：

1. tsconfig.json 配 baseUrl + paths（给 TS/IDE 用）
2. vite.config.ts 配 resolve.alias（给 Vite 打包/运行用）

两边都要配，否则会出现：

• IDE 能跳转但运行时报错（或反过来）

1) tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

如果是 monorepo/多包，也可以把 baseUrl 设为项目根，并明确到每个包的 src。

2) Vite 配置（resolve.alias）

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3) 常见坑

3.1 paths 写对了但仍然找不到

检查：

• baseUrl 是否是你期望的目录
• paths 的 key 是否带 /*
• 你的真实目录是否是 src/（别名指向错目录很常见）

3.2 ESLint 报 import/no-unresolved

如果用了 eslint-import-resolver，需要额外配置 resolver（按你的 eslint 体系决定）。

3.3 只配 Vite 不配 TS

典型现象：能跑但 IDE 全红；类型提示/跳转失效。

4) 推荐做法（我自己）

• 项目小：手动 alias（就上面最小配置）
• 项目大/多包：统一抽一份路径别名约定，并写在根目录文档里，避免每个包随意定义