webstorm中@/xxx标红但项目能运行，是因为vite的resolve.alias与typescript的paths是两套独立机制；必须在tsconfig.app.json（或tsconfig.json）中正确配置"baseurl":"."和"@/":["src/"]，安装@types/node，并在webstorm中启用路径映射后手动重启typescript服务。
WebStorm 里 @/xxx 路径标红，但项目能跑
这不是你 tsconfig.json 配错了，而是 WebStorm 根本没读它，或者读了但没重载类型服务。Vite 的 resolve.alias 和 TypeScript 的 paths 是两套系统：前者只管打包时找文件，后者才管编辑器里能不能跳转、补全、不报错。
常见现象是：Cannot find module '@/components/xxx' or its corresponding type declarations，但 npm run dev 完全正常。
- 打开任意一个
.ts文件，看状态栏右下角有没有TypeScript小部件；没有就说明 TS 语言服务压根没启动 - 确认你改的是 WebStorm 实际加载的那个
tsconfig.json—— 如果项目有tsconfig.app.json（Vue CLI/Vite 模板常生成），TS 会优先用它，paths必须写进这个文件，而不是根目录的tsconfig.json - 改完配置后，必须手动点状态栏的
TypeScript → Restart TypeScript Service（或快捷键Ctrl+Shift+A搜 “Restart TypeScript Service”）
baseUrl 和 paths 怎么配才生效
baseUrl 是所有 paths 解析的起点，它不是“相对路径”，而是 TypeScript 类型解析的根上下文。写错一个字符，整个别名系统就失效。
-
baseUrl必须是字符串字面量"."或绝对路径；"./src"、"src"、"src/"全部无效 -
paths中的 key 是模块 ID 模式，value 是相对于baseUrl的路径数组；"@/*": ["src/*"]正确，"@/*": ["./src/*"]错误 - 完整正确示例：
{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"], "@utils/*": ["src/utils/*"]}}}
Vite 的 alias 对 WebStorm 完全透明
WebStorm 不读 vite.config.ts，也不解析 path.resolve(__dirname, 'src') 这种动态路径。哪怕你在 Vite 里配了 @: path.resolve('src')，WebStorm 该红还是红。
实操建议：
- 删掉
vite.config.ts里任何和路径别名重复的干扰项（比如同时配了'@utils': 'src/utils'），避免混淆自己 - 把所有路径映射统一收口到
tsconfig.json（或tsconfig.app.json）中，这是 WebStorm 唯一认的来源 - 如果用到了 Node.js API（如
path.resolve），补上npm install @types/node --save-dev，否则类型缺失可能间接导致路径解析失败
为什么重启服务后还标红？检查这三处
路径映射看似简单，但 WebStorm 加载、解析、缓存三步都可能卡住。最容易被忽略的是缓存残留和文件权限问题。
- 执行
File → Invalidate Caches and Restart → Just Restart，强制清空类型服务缓存 - 终端进项目根目录，运行
ls -l node_modules/typescript确认权限可读；若用 pnpm，检查node_modules/.pnpm下是否真实解压出typescript - 打开
Settings → Languages & Frameworks → TypeScript，确认 TypeScript version 下拉菜单里选的是Project preferences对应的版本，不是Bundled或Global
真正起作用的永远是 tsconfig.json + baseUrl + 手动重启服务 + 缓存清理 —— 四者缺一不可。少做一步，@/xxx 就只是个好看符号。
