there are several projects that run on a server, but visit different pages according to different domain name prefixes
for example:

 erp.abc.com  erp
 mall.abc.com  
 work.abc.com   
 

the following is the configuration of the background management service nginx

server {
listen       80;
server_name  work.abc.com;

-sharpcharset koi8-r;
root /resources/work;
index index.html;
-sharpaccess_log  logs/host.access.log  main;
client_max_body_size 5m;
location / {
    proxy_pass http://127.0.0.1:3004;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ \.(gif|jpg|png|GIF|JPG|PNG|ico|bmp|js|css|html|htm|ttf|woff|txt)$ {
    root /resources/work;
}

}

server {
listen       80;
server_name  erp.abc.com;

-sharpcharset koi8-r;
root /resources/erp;
index index.html;
-sharpaccess_log  logs/host.access.log  main;
client_max_body_size 5m;
location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ \.(gif|jpg|png|GIF|JPG|PNG|ico|bmp|js|css|html|htm|ttf|woff|txt)$ {
    root /resources/erp;
}

}

the difference is that the port of the reverse proxy is different, the domain name prefix is different, and the packaged vue project is different from the directory.

questions are as follows:

now direct access to the work.abc.com browser will return notfound

/index.html

I have tried to modify the nginx configuration and found that it has something to do with this configuration

proxy_pass http://127.0.0.1:3004;

if it is blocked, it can be accessed directly through the domain name without a suffix, but it is obvious that the project will not respond.

I would like to ask you how to access it directly through the domain name and have a reverse proxy to make the service respond normally