Vue 项目里的路径别名为什么值得配：不是偷懒，是在降低维护成本

项目目录一深，前端里最先变难看的往往不是业务逻辑，而是导入路径。

你会开始看到这种东西：

复制
1import UserCard from '../../../../components/UserCard.vue';

第一次还能接受，文件一多以后，这种路径本身就会变成维护负担。

别名解决的不只是长度问题

很多人第一次配路径别名，会觉得它只是为了少写几个 ../。这当然算好处，但更大的价值其实是稳定。

例如：

复制
1import UserCard from '@/components/UserCard.vue';

这样写之后，组件位置一眼就清楚，也不会因为当前文件所在层级不同，导入路径长得天差地别。

目录结构调整时会省很多事

相对路径最麻烦的一点，是它过于依赖当前位置。

只要文件换个目录，很多引用都得跟着改。项目越大，这种成本越明显。

用了别名以后，路径更像是在描述“我依赖哪个模块”，而不是“我从这里往上跳几层再往下找”。

在 Vue 项目里尤其常见

Vue 项目里组件、视图、store、utils 很容易形成比较清晰的目录结构，这时候别名就特别顺手。

常见做法通常是：

• @ 指向 src
• 或者再拆一些业务模块别名

这样导入语句本身会清爽很多。

写在最后

Webpack 路径别名看起来只是一个小配置，但它会持续改善项目的可读性。

工程化很多时候就体现在这种小地方：不是让代码显得更高级，而是让后面的人少看几眼就能明白文件关系。