nginx一个端口部署多个vue项目

# nginx.conf 示例配置

http {
    upstream vue_app1 {
        server 127.0.0.1:8081;
    }

    upstream vue_app2 {
        server 127.0.0.1:8082;
    }

    server {
        listen 80;

        location /app1/ {
            proxy_pass http://vue_app1/;
            # 确保路径正确传递给后端应用
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /app2/ {
            proxy_pass http://vue_app2/;
            # 确保路径正确传递给后端应用
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

解释说明：

1. upstream 块：

   • 定义了两个 upstream 块，分别指向两个不同的 Vue 应用。每个 upstream 块中指定了一个后端服务器地址和端口（例如 127.0.0.1:8081 和 127.0.0.1:8082）。这些地址应该是你的 Vue 应用实际运行的地方。

2. server 块：

   • listen 80; 表示 Nginx 监听 80 端口。
   • location /app1/ 和 location /app2/ 分别定义了两个不同的 URL 路径，用于区分不同的 Vue 应用。
   • proxy_pass 指令将请求代理到对应的 upstream 块中指定的后端服务器。
   • proxy_set_header 指令确保正确的 HTTP 头信息被传递给后端应用，以便它们能够正确处理请求。

通过这种方式，你可以在同一个 Nginx 实例和同一个端口上部署多个 Vue 项目，并通过不同的 URL 路径来访问它们。