WebStorm 不识别 vite.config.ts 中的 @ 别名，因其仅依赖 tsconfig.json 的 compilerOptions.paths 配置；需正确设置 baseUrl: "."、paths: {"@/": ["src/"]}，并重启 TypeScript 服务。
WebStorm 为什么看不到 vite.config.ts 里的 @ 别名
因为 WebStorm 根本不读 vite.config.ts —— 它只认 tsconfig.json（或 tsconfig.app.json）里的 compilerOptions.paths。Vite 运行时靠 resolve.alias 替换路径，而 WebStorm 的跳转、补全、标红检查全依赖 TypeScript 语言服务对 paths 的静态解析。
常见错误现象：import { api } from '@/api' 下红波浪线、Ctrl+Click 跳转失败、输入 @/ 后无路径提示。
-
vite.config.ts中写了alias: { '@': path.resolve(__dirname, 'src') }，但 WebStorm 视而不见 - 哪怕 Vite 构建完全正常，IDE 仍报
Cannot find module '@/api' - 别名配置没同步到 TypeScript 配置里，就等于没配
tsconfig.json 必须怎么写才生效
三要素缺一不可：baseUrl 必须是 "."，paths key 必须以 / 结尾，值必须与实际目录结构严格匹配。
正确示例（放在项目根目录的 tsconfig.json 或 tsconfig.app.json 中）：
{"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}}
-
baseUrl写成"./src"、"src"或绝对路径，TypeScript 直接忽略整个paths块 -
"@/*"不能写成"@"（少/）或"@/"（多/），通配规则不触发 -
["src/*"]不能写成["./src/*"]或["src/"]—— 前者多余点斜杠，后者缺通配符，子路径无法匹配 - 如果项目用了
tsconfig.app.json（如 Vue CLI 模板），优先改它；tsconfig.json里有"extends": "./tsconfig.app.json"就不用重复写
WebStorm 设置里哪几项必须勾选和重启
改完 tsconfig.json 后，WebStorm 不会自动重载 TypeScript 服务 —— 必须手动干预。
- 打开 Settings → Languages & Frameworks → TypeScript
- 确认
TypeScript version指向node_modules/typescript（不是 WebStorm 内置版本） - 勾选
Use paths mapping from tsconfig.json - 点击右下角 TypeScript 图标 → Restart TypeScript Service（快捷键
Ctrl+Shift+A搜 “Restart TypeScript Service”） - 如果状态栏右下角没出现 TypeScript 小图标，说明 TS 服务根本没启动，先检查
node_modules/typescript是否存在
@types/node 为什么非装不可
vite.config.ts 是在 Node 环境下运行的 TS 文件，里面用 path.resolve(__dirname, 'src')，但 TypeScript 默认没有 path 和 __dirname 的类型定义。没装 @types/node，WebStorm 会在 vite.config.ts 第一行就标红 import path from 'path'，导致整个配置文件解析失败，后续别名自然失效。
- 执行命令：
npm install @types/node --save-dev - 注意版本兼容：TypeScript 5.x 推荐配
@types/node20.x+；若已装旧版，建议升级 - 如果项目有
tsconfig.node.json，确认它被tsconfig.json的references正确引用
WebStorm 对路径别名的识别非常“死板”：它不解析动态表达式、不推断约定、不跨文件联动。哪怕你 vite.config.ts 和 tsconfig.json 差一个字符，或者漏一次 TS 服务重启，智能提示就彻底失效。最易被忽略的是 baseUrl 必须为 "." 这个硬性要求——写错就等于没配。
