nginx + 节点应用程序 + vuejs 应用程序

Question

我正在尝试设置 nginx 配置来实现这一点：

• 我有一个 nodejs 应用程序，它服务于公共部分，在本地主机的 3000 端口运行的服务器上。
• 我有一个 vuejs spa 应用程序，它在端口 8000 上运行的本地主机服务器上提供应用程序的“管理”部分。

我想要实现的是让 nginx 充当反向代理，代理所有发往 nodejs 应用程序的请求http://localhost:8080/以及发往我的 vuejs 应用程序http://localhost:8080/*的请求http://localhost:8080/admin。为此，我编写了一个 nginx 配置文件，如下所示：

server {
    listen       8080;
    server_name  localhost;

    location /admin/ {
      proxy_pass http://127.0.0.1:8000/admin/;
      proxy_redirect off;
      proxy_store off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP  $remote_addr;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $http_host;
      rewrite ^/admin/(.*)$ /$1 break;
    }

    location / {
      proxy_pass http://127.0.0.1:3000/;
      proxy_redirect off;
      proxy_store off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP  $remote_addr;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $http_host;
    }
}

不幸的是，管理部分无法正常工作，因为当我访问时，localhost:8080/admin/初始 html 模板正在使用 进行遍历<script src="/app.js"></script>，因此尝试加载localhost:8080/app.js，但显然不起作用。我尝试<base href="/admin">在管理站点中设置标签，但不起作用。它一直尝试加载localhost:8080/app.js，而不是localhost:8080/admin/app.js（此 url 工作正常）。

我应该怎么做才能使这个配置起作用？

非常感谢。