Single server for multiple web-apps (same domain)

Question

I'm trying to configure nginx to serve two independent Vue.js web-apps (let's call them app1 and app2). Applications are served as static html files on separate servers:

server {
    server_name app1;
    listen 9101;

    location / {
    root html\app1;
    index index.html;
    }
}
server {
    server_name app2;
    listen 9102;

    location / {
    root html\app2;
    index index.html;
    }
}

I configured the main server to act as reverse proxy:

server {
    server_name apps;
    listen 80;

    location ^~ /app1 {
        proxy_pass http://localhost:9101/;
    }

    location ^~ /app2 {
        proxy_pass http://localhost:9102/;
    }
}

The desired effect would be to run apps based on provided url (e.g. run app 1 when going to localhost/app1).

The problem is that html files locate their resources through root prefixed relative paths. For example both app1/index.html and app2/index.html will try to fetch their js files using the /js/app-*.js.

How can I configure nginx to recognize which app the request is coming from and route it to valid server?

EDIT: To clarify, what I'm trying to achieve:

• Client goes to http://example.com/app1
• html/app1/index.html gets loaded.
• Every request sent from html page to / gets routed to app1/ (so link to /js/script.js in html code gets actually fetched from /app1/js/script.js)
• Same goes for app2.

Apps are for internal use only (server is accessible through intranet).