一个端口配置两个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.html
        error_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