两个React项目部署在同一个域名，一个主地址，一个子地址，二级白屏等问题

主域名配置的那个项目正常配置就可以了，但是对于子地址的项目，需要做很多的配置的。

注意

子地址的那个项目在配置中需要配置为子地址：

base: '/subpk'

在vite.config.ts中修改：

如果这里没有配置正确，会导致白屏或者加载静态资源地址不对！假设你配置的子地址是subpk，那么你的静态资源应该也要是这个地址加载的。但是如果白屏的时候，可能就不是这个地址加载了。

配置Nginx

先创建一个静态的html文件，然后放到服务器的/var/www/subpk目录下

1. 确保你的 HTML 项目存放在服务器上

假设你的 subpk 项目存放在服务器的 /var/www/subpk/ 目录下。

如果没有该目录，可以执行：

mkdir -p /var/www/subpk/

然后将你的 HTML 文件上传到该目录。

---

2. 修改 Nginx 配置

打开你的 Nginx 配置文件（通常位于 /etc/nginx/sites-available/default 或 /etc/nginx/nginx.conf，也可能是 /etc/nginx/conf.d/dev.fai-link.com.conf，具体路径取决于你的服务器环境），然后添加如下配置：

server {listen 80;server_name 你的域名;location / {root /var/www/react_project/;  # 你的 React 项目路径index index.html;try_files $uri /index.html;}location /subpk {# 注意这里不要写/var/www/subpk！！！！，而是/var/www/root /var/www/;index index.html;}
}

说明：

• server_name 域名; 指定你的主域名。
• location / 配置 React 项目路径。
• location /subpk 指定 http://域名/subpk 访问 /var/www/subpk/ 目录下的 index.html。

---

3. 检查 Nginx 配置并重启

执行以下命令检查 Nginx 配置是否正确：

nginx -t

如果没有错误，重启 Nginx 使配置生效：

sudo nginx -s reload 

---

4. 访问测试

在浏览器输入 http://域名/subpk，检查你的 HTML 页面是否正常加载。

这样就成功地在 http://域名/subpk 下配置了你的 HTML 项目。