如何修改ReactJS应用的服务URL，实现子路径部署且不依赖应用路由？

以下几种方案都能让React应用部署在子路径下，且应用代码无需做任何修改，完全不知情：

1. 构建阶段配置基础路径（Create React App 场景） #

通过PUBLIC_URL环境变量指定子路径，构建时自动为所有静态资源添加该前缀，应用代码无需感知：

• 构建命令：

PUBLIC_URL=/path npm run build

构建完成后，生成的index.html中所有静态资源（JS、CSS、图片等）的路径都会自动带上/path/前缀，直接将构建产物部署到服务器的/path子目录即可，应用本身无需任何配置。

2. 反向代理服务器配置（以Nginx为例） #

通过Nginx的反向代理，将/path路径的请求转发到React应用的根服务，应用始终处理根路径请求：

• Nginx配置示例：

server {
    listen 3000;
    server_name localhost;

    location /path {
        # 末尾的斜杠必须加，确保转发后的路径是根路径
        proxy_pass http://localhost:3001/;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}

这里假设React应用运行在localhost:3001，用户访问localhost:3000/path时，Nginx会将请求转发给React应用，应用完全不知道/path的存在，仍按根路径处理所有请求。

3. 静态文件服务器直接部署子目录（以Apache为例） #

将React构建后的静态文件直接放在服务器的/path对应目录，通过服务器配置映射路径：

• Apache配置示例：

Alias /path /var/www/react-build
<Directory /var/www/react-build>
    Options +FollowSymLinks
    AllowOverride All
    Require all granted

    # 若为SPA，需配置刷新路由指向index.html（可选）
    RewriteEngine On
    RewriteBase /path
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /path/index.html [L]
</Directory>

将构建后的build目录内容放到/var/www/react-build，Apache会把/path路径的请求映射到该目录，应用代码无需任何修改。

内容的提问来源于stack exchange，提问作者Nemus