WebStorm 中 @ 路径报红是因为 TypeScript 服务未正确加载 tsconfig.json 的 paths 配置，需确保 baseUrl 为 "."、paths 正确配置、手动重启 TS 服务，并确认 WebStorm 加载的是正确的 tsconfig 文件（如 tsconfig.app.json），同时清理缓存。
@ 路径在 WebStorm 里报红，不是你配错了，而是它根本没读你的 tsconfig.json 或没触发类型服务重载 —— 配置必须三处同步，缺一不可。
为什么 @/xxx 在编辑器里标红，但项目能正常运行？
因为 Vite 和 TypeScript 的路径解析是两套系统：Vite 的 resolve.alias 只管打包时怎么找文件；TypeScript 的 paths 才管编辑器里能不能跳转、补全、不报错。WebStorm 默认只信任 tsconfig.json 里的 baseUrl 和 paths，但如果你没手动触发 TS 服务重启，或配置没落到正确的 tsconfig 文件上，它就继续“装瞎”。
- 常见错误现象：
Cannot find module '@/components/xxx' or its corresponding type declarations.，但npm run dev完全没问题 - 检查点：打开任意
.ts文件，看状态栏右下角有没有TypeScript小部件；如果没有，说明 TS 语言服务根本没启动 - 关键动作：改完
tsconfig.json后，必须点状态栏的TypeScript→Restart TypeScript Service（或者快捷键Ctrl+Shift+A搜 “Restart TypeScript Service”）
tsconfig.json 的 paths 必须配对 baseUrl，且不能写相对路径
baseUrl 是所有 paths 解析的起点，它必须是字符串字面量 "." 或绝对路径；"./src" 或 "src" 都无效 —— TypeScript 不支持相对 baseUrl。
- 正确写法：
{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}} - 错误写法：
"baseUrl": "./src"、"baseUrl": "src"、"@/*": ["./src/*"] - 注意：如果项目有
tsconfig.app.json（比如 Vue CLI 或某些 Vite 模板生成的），TypeScript 会优先用它；此时必须把paths放进tsconfig.app.json，而不是根目录的tsconfig.json - 补充依赖：
npm install @types/node --save-dev，否则path.resolve等 Node API 会报类型错误，间接导致别名配置被 IDE 忽略
WebStorm 不自动识别 vite.config.ts 里的 alias，别指望它“猜”
Vite 的 resolve.alias 对 WebStorm 完全透明 —— 它既不读 vite.config.ts，也不解析 path.resolve(__dirname, 'src') 这种动态路径。IDE 只认静态的 tsconfig.json 映射，所以哪怕你在 Vite 里配了 @: path.resolve('src')，WebStorm 该红还是红。
- 实操建议：删掉
vite.config.ts里任何和路径别名无关的干扰项（比如重复配'@utils': 'src/utils'），专注用tsconfig.json统一管理 - 验证方式：在
.ts文件里输入import xxx from '@/，看是否弹出src/下的文件提示；不弹就是paths没生效 - 隐藏坑：如果你用的是 pnpm + workspace，确保
tsconfig.json在当前子包根目录，且 WebStorm 打开的是该子包（不是 monorepo 根目录），否则 TS 服务可能加载错配置
改完配置后，WebStorm 缓存比你想象中更顽固
它不会因为你保存了 tsconfig.json 就立刻刷新路径索引 —— 很多时候需要手动清缓存 + 强制重载，尤其当你从 Vue CLI 迁移到 Vite、或升级了 WebStorm 版本之后。
- 必做三步：
File → Invalidate Caches and Restart → Invalidate and Restart；重启后等 TS 小部件出现；再点它 →Restart TypeScript Service - 进阶检查：按
Ctrl+Alt+S进设置 →Language & Frameworks → TypeScript，确认Node.js interpreter指向项目本地的node_modules/.bin/tsc（而非全局），且Compiler options下的tsconfig.json路径是正确的 - 最容易被忽略的一点：WebStorm 的 TypeScript 服务默认只监听
tsconfig.json，但如果你改的是tsconfig.app.json，它不会自动 reload —— 必须手动触发一次重启
路径别名不是“配一次就完事”的功能，它是 Vite、TypeScript、WebStorm 三方协作的脆弱平衡点；只要其中一环没对齐，编辑器就立刻报红。最省事的排查顺序永远是：先确认 TS 小部件亮了，再查 tsconfig 位置和内容，最后清缓存重启 —— 其他花哨操作，基本都是在绕路。
