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

Question

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

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

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

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

在我当前的conf中，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;
}
}
}

Answer 1

手动将应用程序路由到路径"/"，而不是依赖Vue进入主页。

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
export default {
setup() {
const route = useRouter();
const doOpeningCeremony = async () => {
route.push({path: '/'});
}
onMounted(doOpeningCeremony);
},
}