同域名部署两个Vite构建React应用遇/admin路径404的解决方法

核心问题 #

Nginx 不支持解析.htaccess文件，你写的.htaccess规则完全不会生效，这是导致/admin路径404的根本原因。同时原Nginx配置没有针对/admin路径做单独处理，所有请求都会被导向app2的index.html。

修复步骤 #

1. 删除无用的.htaccess文件 #

直接删掉项目里的.htaccess，它对Nginx环境没有任何作用。

2. 修改Nginx配置文件 #

根据你的目录结构（app1在/var/www/html/admin，app2在/var/www/html），调整Nginx配置如下：

root /var/www/html; # 根目录直接指向app2所在的文件夹，简化路径逻辑

# 处理所有/admin开头的请求，对应app1
location /admin {
    # 优先匹配实际存在的静态资源（比如admin下的js、css文件），找不到则返回app1的index.html（适配React路由）
    try_files $uri $uri/ /admin/index.html;
}

# 处理其他所有请求，对应app2
location / {
    try_files $uri $uri/ /index.html;
}

如果坚持保留root /var/www，则配置需要调整为：

root /var/www;

location /admin {
    try_files $uri $uri/ /html/admin/index.html;
}

location / {
    try_files $uri $uri/ /html/index.html;
}

3. 配置Vite的base路径（关键） #

为了让app1的静态资源（JS、CSS、图片等）能正确加载，需要在app1的vite.config.js中设置base路径：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/admin/' // 必须添加这一行，确保资源路径以/admin开头
});

配置完成后，重新构建app1并部署到服务器的/var/www/html/admin目录。

4. 验证并重启Nginx #

执行以下命令检查Nginx配置是否合法：

nginx -t

如果输出test is successful，则重启Nginx使配置生效：

systemctl restart nginx

原理说明 #

• 通过location /admin块单独拦截/admin路径的请求，将其导向app1的index.html，同时优先匹配静态资源，避免路由拦截正常文件访问。
• Vite的base配置确保app1构建后的资源路径自动加上/admin/前缀，不会出现静态资源404的问题。

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