WebStorm不识别@别名是因为它不自动读取vite.config.ts或vue.config.js中的resolve.alias，必须手动指定webpack.config.js路径或配置tsconfig.json的baseUrl与paths，并重启TypeScript服务。
WebStorm 不识别 @ 别名，是因为它根本没读你的 vite.config.ts 或 vue.config.js
WebStorm 默认不解析构建工具配置里的 resolve.alias。哪怕你在 vite.config.ts 里写了 @: path.resolve(__dirname, './src')，它也当没看见——除非你手动告诉它“去哪找 alias 定义”。它只认两种来源：webpack.config.js（哪怕项目不用 Webpack）或 tsconfig.json 中的 paths。Vue CLI 项目可直接指向 node_modules/@vue/cli-service/webpack.config.js；Vite 项目则必须自己建一个最小化 webpack.config.js 并在 WebStorm 设置中指定路径。
必须同步配 tsconfig.json 的 baseUrl 和 paths，否则 .ts 文件一定标红
TypeScript 编译器和 WebStorm 的跳转/补全逻辑主要靠 tsconfig.json 驱动，和运行时无关。只配 Vite 别名，.ts 里 import utils from '@utils' 就会飘红，但 .vue 里可能还能跳——这是假象，说明 TS 层没生效。
-
baseUrl必须是相对路径，如"./"或"./src"，不能写"src"（缺./会导致解析失败） -
paths的 key 必须以/结尾，例如"@/*": ["src/*"]，写成"@*"或"@"都不生效 - 值路径必须真实存在，且大小写严格匹配（macOS/Linux 下
Utils≠utils） - 如果用的是
tsconfig.app.json，确保 WebStorm 读的是这个文件，而不是根目录下的tsconfig.json
配完必须重启 TypeScript 服务，否则修改无效
WebStorm 不会自动热重载 tsconfig.json 变更。改完 baseUrl 和 paths 后，要手动触发刷新：
- 打开
File → Settings → Languages & Frameworks → TypeScript - 确认 TypeScript version 选的是项目本地的（如
node_modules/typescript），不是内置版本 - 勾选
Use paths mapping from tsconfig.json（旧版默认关闭） - 点击
Apply，然后看右下角 TS 图标 →Restart TypeScript Service
不重启，所有跳转、补全、标红都不会更新。
立即学习“前端免费学习笔记（深入）”；
@ 在 SCSS 中要用 ~@/，这是 WebStorm 和构建工具共同要求的语法
在 .vue 的 <style> 块或独立 .scss 文件中，直接写 @import "@/styles/vars.scss" 会被 WebStorm 标红，Vite 构建也可能失败。这是因为 CSS 预处理器对模块解析规则不同。
- 必须加
~前缀：写成@import "~@/styles/vars.scss" -
~是 Webpack/Vite 约定的别名前缀，表示“从 alias 开始解析”，WebStorm 也认这个约定 - 不加
~时，SCSS 解析器会把它当成 CSS 的@import原生语法，而非模块导入
这个细节常被忽略，但它是唯一能让样式文件里 @ 别名既跳转又编译通过的方式。
