1、系统资源结构情况

1.1、后台

11003端口
服务根路径是/qmp

1.2、前端

已有系统使用80端口，根目录为E盘的dist文件夹

nginx配置

server{listen 80;server_name servername;root E:\dist\index index.html index.htm;
}

2、实现

2.1、目标

部署新的系统前端，部署后通过nginx的80端口访问，对应本例中为：在浏览器里面输入：http://服务器IP/qmps能访问

2.2、前端Vue3 Build前设置VITE_PUBLIC_PATH

// production.env
VITE_PUBLIC_PATH =/qmps/

build命令时，会按照prod生产环境设置的路径配置，上面的配置路径应与build后要放置的文件夹名称一致。
即，前端build后，在服务器的E:\dist下新建文件夹qmps,将前端打包好的dist文件夹里面的内容拷贝到服务器的qmps目录下

2.3、nginx设置代理

添加如下到nginx配置。该配置实现在浏览器里面遇到带有qmps请求时自动转发到服务器的后端服务

location /qmps/ {#proxy_pass http://服务器IP:后端服务端口号/后端服务的名称/;proxy_pass http://服务器IP:11003/qmp/;
}

本例中涉及到的nginx conf配置：

server{listen 80;server_name servername;root E:\dist\index index.html index.htm;
}
location /qmps/ {#proxy_pass http://服务器IP:后端服务端口号/后端服务的名称/;proxy_pass http://服务器IP:11003/qmp/;
}

3、总结

1、nginx根目录下面建立存放前端的子文件夹qmps
2、前端打包时设置VITE_PUBLIC_PATH 为上述子文件夹名qmps
3、nginx设置代理，将qmps转发至后台服务
4、浏览器中输入http://服务器IP/qmps