1.方案思路使用不同的端口号部署不同的项目或者使用不同路径这个方案不需要开放额外端口更省事2.初始化项目将打包好的前端文件传输到Linux中的var/www/路径下面3. 清理旧的端口配置sudo rm -f /etc/nginx/conf.d/firework.conf sudo rm -f /etc/nginx/conf.d/fireworks.conf sudo rm -f /etc/nginx/sites-enabled/fireworks.conf sudo rm -f /etc/nginx/sites-available/fireworks.conf4.确认三个项目的文件都在ls /var/www/fuel-frontend/index.html # Vue 项目 ls /var/www/fireworks/index.html # 烟花 ls /var/www/muran-birthday/index.html # 周岁烟花秀如果有目录不存在先创建并上传文件sudo mkdir -p /var/www/fireworks sudo mkdir -p /var/www/muran-birthday5.替换为统一配置把 fuel-frontend 的旧配置和所有项目合并到一个文件里# 先删掉旧的 fuel-frontend 配置不管是 conf.d 还是 sites-enabled 里的 sudo rm -f /etc/nginx/conf.d/fuel-frontend.conf sudo rm -f /etc/nginx/sites-enabled/fuel-frontend.conf # 创建统一配置文件 cat | sudo tee /etc/nginx/conf.d/multi-sites.conf EOF server { listen 80; server_name 【你的云服务器Ip】; # 项目 1fuel-frontend根路径 location / { root /var/www/fuel-frontend; try_files $uri $uri/ /index.html; } # 项目 2fireworks烟花 location /fireworks/ { alias /var/www/fireworks/; try_files $uri $uri/ /fireworks/index.html; } # 项目 3muran-birthday周岁烟花秀 location /birthday/ { alias /var/www/muran-birthday/; try_files $uri $uri/ /birthday/index.html; } # API 代理fuel-frontend 后端接口 location /api/ { proxy_pass http://127.0.0.1:8080; 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; } } EOF6.设置权限sudo chown -R www-data:www-data /var/www/fireworks /var/www/muran-birthday sudo chmod -R 755 /var/www/fireworks /var/www/muran-birthday7.校验 重载sudo nginx -t sudo nginx -s reload看到syntax is ok和test is successful就通过了。8.验证# 逐个测试 curl -I http://127.0.0.1/ # fuel-frontend curl -I http://127.0.0.1/fireworks/ # 烟花 curl -I http://127.0.0.1/birthday/ # 周岁烟花秀三个都返回200 OK就成功了。手机浏览器访问注意事项fuel-frontend 是 Vue 项目它部署在根路径/vite.config.ts里base: /不用改没问题。fireworks 和 muran-birthday 是纯 HTML 单文件没有外部资源依赖CSS/JS 都内联子路径部署不会有资源 404 问题直接能用。如果以后 Vue 项目也要部署到子路径比如/admin/那 vite 的base必须改成/admin/否则资源会 404 白屏。不用开放额外端口全部走 80 端口阿里云安全组不用动。