react browserHistory模式 打包后页面是空白的

Question

1.问题背景：react项目使用的是browserHistory模式

若域名下只有一个项目，则可以做以下nginx配置

server {

listen       8089;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
    root   D:/gitProject/fund_h5/dist/;
    index  index.html index.htm index.php;
    try_files $uri /index.html;
}

}

8089端口下只写一个根路径'/'，此方法下项目可以正常显示页面

但当一个域名下有多个项目时，如此写法却无法正常显示fund_h5

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/gitProject/;
            index  index.html index.htm index.php;
        }

        location /fund_h5 {
            root   D:/gitProject/;
            index  index.html index.htm index.php;
            try_files $uri /fund_h5/dist/index.html;
            #rewrite .* /index.html break;
        }

        location /mtwm {
            root   D:/gitProject/;
            index  index.html index.htm index.php;
            try_files $uri $uri/ /mtwm/dist/index.html;
        }
    }
    
    
    fund_h5是用react项目写的，mtwm是用vue项目写的，但是经过这样配置之后mtwm是可以正常访问的，页面显示也正常。但是fund_h5只显示了空白页面，如下。

应该怎么解决一个端口下多个项目在打包后显示不出页面的问题？

文件路径如下图

Answer 1

react项目必须在web应用服务器中才能正常访问。你的这种配置方法，相当于把http请求转发到读取服务器上的一个文件，感觉会有问题（不过你的第一种情况又是正常的，比较奇怪）。我们一般的做法是会把react项目先部署到tomcat中，然后用nginx做转发，这样是把到nginx的http请求转发到tomcat的http请求。这样是最稳妥的做法。