用 alias 而非 root 是因 alias 精准替换路径前缀，避免多层目录拼接导致 404；配置需确保 alias 末尾带 /、try_files 回退路径含版本前缀、create-react-app 中 homepage 设为对应路径。
用 alias 指令部署多个 React 版本，核心是让不同 URL 路径映射到各自独立的构建产物目录，同时避免 root 的路径拼接陷阱。
为什么不用 root，而要用 alias？
root 会把 location 匹配的完整路径拼接到指定目录后，容易导致 404；alias 则是直接替换 location 路径部分，更精准控制静态资源映射位置。
例如：
-
location /v1/ { root /var/www; }→ 请求/v1/static/js/main.js实际查找/var/www/v1/static/js/main.js（多了一层v1） -
location /v1/ { alias /var/www/v1/; }→ 同样请求会查找/var/www/v1/static/js/main.js（正确）
基础配置：为每个版本设置独立 alias
确保每个 React 构建产物（含 index.html 和 static/）放在独立子目录中，并在 Nginx 中显式声明其路径。
示例配置片段：
location /v1/ {
alias /var/www/react-app-v1/;
try_files $uri $uri/ /v1/index.html;
}
<p>location /v2/ {
alias /var/www/react-app-v2/;
try_files $uri $uri/ /v2/index.html;
}</p>
注意：alias 值末尾必须加 /，且 try_files 中的 fallback 路径（如 /v1/index.html）要与 location 路径一致，Nginx 才能正确重写为内部请求。
处理 React Router 的 history 模式
React Router v4+ 默认使用 history 模式，需确保所有非资源请求都回退到对应版本的 index.html，由前端路由接管。
关键点：
-
try_files必须包含$uri/（处理目录访问），否则/v1/dashboard这类路径可能 404 - 不要省略
/v1/index.html中的前缀，写成index.html会导致 Nginx 在根目录下查找 - 若使用
create-react-app，构建时需设置homepage: "/v1/"，确保生成的asset路径带正确前缀
补充建议：权限与缓存优化
生产环境中还需注意：
- 确认
/var/www/react-app-v*/目录对 Nginx worker 进程可读（如chown -R www-data:www-data） - 对静态资源（js/css/img）启用 long-term 缓存，但 HTML 文件禁用缓存：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>}location ~* \.html$ {<br> expires -1;<br> add_header Cache-Control "no-cache";<br>} - 考虑添加
gzip on;和gzip_types提升传输效率
不复杂但容易忽略。关键是 alias 路径收尾斜杠、try_files 回退路径前缀、以及前端构建时的 homepage 配置三者严格对应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
