在nginx下运行第二个vue应用程序时如何解决空白页面？

如何解决在nginx下运行第二个vue应用程序时如何解决空白页面？

需要在 macOS Big Sur 下使用 ngnix 运行多个 Vue.js v3 应用。

第一个应用程序位于：/Users/kharraz/Developer/code/homeapp/dist；

第二个应用程序：/Users/kharraz/Developer/code/businessapp/dist； 这两个文件夹包含纱线构建输出；

目标是当我使用 localhost 或 localhost/homeapp 将我带到第一个应用程序时，当我输入 localhost/businessapp 时将我带到第二个应用程序。

根据我目前的配置，localhost/homeapp/index.html 正在工作，但第二个 localhost/businessapp/index.html 给了我一个空白页面。

两个应用程序都在 localhost:8001 和 localhost:8002 下运行良好。 这是我的 nginx.conf 文件：

http {
    server {
        listen 8080;
        
        location / {
            proxy_set_header Host $host;
            proxy_set_header X-Forward-Host $host;
            proxy_pass         http://127.0.0.1:8001;
            break;
        }

        location /markets {
            proxy_set_header X-Forward-Host $host;
            proxy_pass http://127.0.0.1:8002;
        }

    }

    server {
        listen 8001;
        
        location / {
            root /Users/kharraz/Developer/code/homeapp/dist;
            try_files $uri /index.html;
            include /opt/homebrew/etc/nginx/mime.types;
        }
    }

    server {
        server_name businessapp;
        listen 8002;

        location / {
            root /Users/kharraz/Developer/code/businessapp/dist;
            try_files $uri /index.html;
            include /opt/homebrew/etc/nginx/mime.types;
        }
    }
}

解决方法

手动将 App 路由到路径“/”，而不是依赖 Vue 带到主页。

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRouter();

    const doOpeningCeremony = async () => {
      route.push({path: '/'});
    }

    onMounted(doOpeningCeremony);
  },}