一个端口配置两个vue和后端服务，nginx以及前后端服务怎么配？

nginx配置重点看server中的内容：

worker_processes  8;
pid /usr/local/nginx/logs/nginx.pid;events {# 此为 Linux 系统特为处理大批量文件描述符而作改进的 poll 事件模型use epoll;worker_connections  512; # 工作进程的最大连接数量# 允许同时接受多个网络连接multi_accept on;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;include       gzip.conf;server_names_hash_bucket_size 128;server_names_hash_max_size 512;client_header_timeout 15s;client_body_timeout 15s;send_timeout 30s;client_body_buffer_size 512k;client_header_buffer_size 4k;client_max_body_size 512k;large_client_header_buffers 2 8k;proxy_connect_timeout 5s;proxy_send_timeout 120s;proxy_read_timeout 120s;proxy_buffer_size 16k;proxy_buffers 4 64k;proxy_busy_buffers_size 128k;proxy_temp_file_write_size 128k;proxy_next_upstream http_502 http_504 http_404 error timeout invalid_header;#gzip on;#gzip_min_length 1k;#gzip_buffers 4 16k;#gzip_http_version 1.1;#gzip_comp_level 4;#gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;#gzip_vary on;#gzip_disable "MSIE [1-6].";server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;# 第一个服务的vue项目位置location / {alias /usr/data/nginx/firstFront/;try_files $uri $uri/ /index.html;}# 第二个服务的vue项目位置location /second {alias /usr/data/nginx/secondFront/;try_files $uri $uri/ /second /index.html;}# 第一个服务的后端项目location ^~ /back {# 配置websocket -------start---------proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";# 配置websocket -------end---------client_max_body_size 1000M;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 Via "nginx";proxy_intercept_errors on; #重要，只有这样才能到nginx定义的404页面proxy_pass              http://localhost:8080/back/; # 后端项目地址}# 第二个服务的后端项目location ^~ /back/second{# 配置websocket -------start---------proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";# 配置websocket -------end---------client_max_body_size 1000M;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 Via "nginx";proxy_intercept_errors on; #重要，只有这样才能到nginx定义的404页面proxy_pass              http://localhost:8081/back/; # 后端项目地址}#error_page  404              /404.html;# redirect server error pages to the static page /50x.htmlerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

vue前端项目配置

vue第一个项目配置：

# 发布路径
VITE_PUBLIC_PATH = /
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back

vue第二个项目配置

# 发布路径
VITE_PUBLIC_PATH = /second
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back/second
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back/second

访问地址

第一个项目：http://domain:80/
第二个项目：http://domain:80/second