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 位置和内容，最后清缓存重启 —— 其他花哨操作，基本都是在绕路。