🎯 一句话总结：
@路径既不是相对路径，也不是绝对路径，而是 uni-app（基于 Vue + Vite/Webpack）官方推荐的「别名路径」（Path Alias），属于第三种路径引用方式。
🔍 详细对比：三种路径类型
| 类型 | 写法示例 | 特点 | 是否推荐 |
|---|---|---|---|
| 1. 相对路径 | ../../common/style.scss |
从当前文件出发，用 ./ 或 ../ 定位 |
⚠️ 易断裂，不推荐 |
| 2. 绝对路径 | /static/style.css（H5）C:\project\...（系统） |
从根目录开始（Web 根 or 磁盘根） | ❌ 小程序不支持 / 开头的 Web 绝对路径 |
| 3. 别名路径 ✅ | @/common/style.scss |
通过构建工具预设的别名映射到 src |
✅ uni-app 官方推荐 |
✅ 为什么说 uni-app 官方推荐别名路径？
1. 项目模板默认使用
当你用 HBuilderX 创建 uni-app 项目，自动生成的代码中就大量使用 @：
js
import App from '@/App.vue'2. 文档明确说明
uni-app 官方文档 - 路径引用 中指出：
"推荐使用
@引用src目录下的资源，避免相对路径嵌套过深。"
3. 底层构建工具支持
- uni-app 使用 Vite（Vue 3）或 Webpack（Vue 2）
- 这些工具都内置了
@ → src的别名配置 - 无需手动设置，开箱即用
💡 别名路径的核心优势
| 优势 | 说明 |
|---|---|
| ✅ 路径稳定 | 不受文件移动影响（只要在 src 下） |
| ✅ 可读性强 | @/components/Button.vue 比 ../../../../components/Button.vue 清晰得多 |
| ✅ 跨平台兼容 | 在 H5、App、小程序等所有端行为一致 |
| ✅ IDE 智能提示 | VS Code / HBuilderX 能正确解析并跳转 |
🚫 常见误区澄清
| 误区 | 正确理解 |
|---|---|
"@ 是 uni-app 自创的" |
❌ 它是 Vue 生态的标准实践（源自 Vue CLI） |
"@ 就是绝对路径" |
❌ 它是逻辑别名，不是物理绝对路径 |
"不用 @ 也能跑" |
✅ 能跑，但不符合工程规范，后期维护成本高 |
✅ 官方态度总结
uni-app 鼓励开发者使用
@别名路径作为项目内资源引用的标准方式 ，尤其是在引用
src目录下的 JS、Vue、SCSS 等模块时。
🎯 最终结论
@/xxx不属于相对路径- 也不属于传统绝对路径
- 它是 现代前端工程化中的"别名路径"
- 并且是 uni-app 官方推荐的最佳实践 ✅