必须用 alias 而非 root，因 alias 精准替换路径前缀（如 /admin/ → 剥离后拼接），适配 vue 子应用非根部署；root 是简单拼接，易致资源 404。
部署 Vue 项目时用 alias 映射多个静态资源目录，核心是让不同 URL 路径精准指向各自物理目录，互不干扰，尤其适合一个 Nginx 实例托管管理后台、用户前台、文档中心等多子应用的场景。关键不在“多”，而在“映射干净”——每个 location 独立生效，路径前缀被完整剥离，资源定位不依赖 URL 层级。
为什么必须用 alias，而不是 root？
root 是拼接：配置 root /var/www + 请求 /admin/js/app.js → 实际找 /var/www/admin/js/app.js。
alias 是替换：配置 location /admin/ { alias /var/www/admin/; } + 同样请求 → 实际找 /var/www/admin/js/app.js（/admin/ 被完全去掉，再拼剩余路径）。
这对 Vue 子应用至关重要：打包后资源路径基于 publicPath，若部署在 /admin/ 下，用 root 会导致资源路径多套一层前缀，极易 404；而 alias 天然适配非根路径部署。
基础多目录映射配置示例
假设三个 Vue 项目构建产物分别放在：
- 管理后台：
/var/www/admin/→ 访问地址https://example.com/admin/ - 用户前台：
/var/www/web/→ 访问地址https://example.com/ - API 文档：
/opt/swagger-ui/→ 访问地址https://example.com/api/v1/docs/
对应 Nginx 配置：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章