webpack 中 resolve.alias 应配置为 "@/": path.resolve(__dirname, "src/") 以避免模糊匹配和上下文漂移，ts 需同步配置 tsconfig.json 的 paths，css @import 不支持 js 层别名。
Webpack 中 resolve.alias 怎么配才不踩坑
别名不是加了就能用，Webpack 会按顺序匹配，一旦写成 "@": "./src" 这种模糊路径，import "@/utils/request" 可能被误解析成 node_modules/@/utils/request——因为 @ 也是 scoped package 前缀。
实操建议：
- 用绝对路径起点：
"@": path.resolve(__dirname, "src")，避免相对路径导致的上下文漂移 - 结尾加
/显式声明是目录："@/": path.resolve(__dirname, "src/")，防止匹配到同名文件（比如有src/@.js） - 优先级高于
node_modules，所以别 alias 成"react": "preact"这类已有包名，否则其他依赖里import "react"也会被劫持 - TS 用户必须同步改
tsconfig.json的compilerOptions.paths，否则编辑器跳转和类型检查仍走原始路径
Vite 里 resolve.alias 和 Webpack 有什么关键差异
Vite 的 alias 是开发时生效的，构建阶段由 esbuild 或 rollup 处理，行为更“直觉”，但有个硬限制：它不支持函数式 alias（Webpack 支持），也不能在 alias 值里用 process.env 动态拼接。
常见错误现象：
-
import "@/api"报错Cannot find module '@/api'—— 很可能是没配.ts后缀，Vite 默认不自动补后缀，得在resolve.extensions加上".ts" - alias 指向软链接目录（比如
node_modules/foo/src），Vite 开发服务器可能缓存旧路径，需重启 server，不是热更新能解决的 - 用了
vite-plugin-react但 alias 不生效？确认插件在 alias 配置之后加载，顺序影响解析时机
CSS 里 @import 路径为什么不能用别名
CSS 文件本身没有模块系统，@import "assets/vars.css" 的路径解析完全依赖当前 CSS 文件所在位置，Webpack/Vite 的 JS 层 alias 对它无效。想让 CSS 也用别名，得靠预处理器或额外插件。
使用场景与方案：
- Sass/Less：用
includePaths把src/assets加入搜索路径，之后@import "vars"就能直接命中src/assets/vars.scss - PostCSS：配合
postcss-import插件，它支持resolve钩子，可手动注入 alias 映射逻辑 - 纯 CSS：没捷径，老实用相对路径，或者把公共 CSS 提成 CSS-in-JS 或
:root变量，避开@import - 注意：Sass 的
includePaths不继承 Webpack 的resolve.modules，必须显式重复配置
别名配置后，VS Code 跳转失效怎么办
编辑器不读 Webpack/Vite 配置，只认 jsconfig.json 或 tsconfig.json。即使运行时一切正常，Ctrl+Click 依然会跳到错误位置。
必须做的两件事：
- 在
jsconfig.json（JS 项目）或tsconfig.json（TS 项目）里补全compilerOptions.baseUrl和compilerOptions.paths，格式要和构建工具一致 - 确保
baseUrl是相对于 tsconfig 文件的路径，不是项目根目录；如果 tsconfig 在src/下，baseUrl: "."指的就是src/，不是项目根 - 改完配置后，VS Code 可能缓存旧索引，需要手动触发
Restart TS Server（Cmd/Ctrl + Shift + P → 输入该命令） - 别用
paths映射到node_modules内部路径，TypeScript 不允许这种“越界”映射，会静默忽略
路径别名本质是开发者和工具链之间的契约，JS 运行时、CSS 预处理器、编辑器、类型系统各自认各自的账，少对齐一环，就少一个地方能用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
