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

203 阅读2分钟

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

注意

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

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 项目。