很多同学做完 SpringBootVue 毕设后本地运行没问题但一部署到服务器就不知道怎么访问前端和后端接口。本文记录一套比较通用的 Nginx 反向代理部署方案适合计算机本科毕业设计项目上线演示。1. 部署结构前后端分离项目通常有两个独立部分SpringBoot 后端运行在服务器某个端口比如8080Vue 前端打包成静态资源由 Nginx 访问Nginx接收用户请求把前端页面返回给浏览器把/api请求转发给后端推荐结构用户访问域名 ↓ Nginx ├─ 前端页面 → /root/dist/ └─ 后端接口 → http://127.0.0.1:80802. 前端打包Vue 项目部署前先打包生产环境代码npm run build打包完成后会生成一个dist目录。把这个目录上传到服务器比如放到/root/dist/注意如果前端请求地址写死了localhost:8080部署后会访问失败。建议把接口地址改成相对路径例如baseURL: /api这样前端请求会自动访问当前域名下的/api再由 Nginx 转发给 SpringBoot。3. 后端打包运行SpringBoot 项目使用 Maven 打包mvn clean package -DskipTests打包成功后在target目录下找到jar包上传到服务器并运行nohup java -jar demo.jar 运行后检查端口是否正常netstat -nltp | grep 8080如果能看到 8080 端口说明后端已经启动。4. Nginx 配置反向代理编辑 Nginx 配置文件vim /etc/nginx/nginx.conf加入以下内容server { listen 80; server_name localhost; root /root/dist; index index.html; location / { try_files $uri $uri/ /index.html; } 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; } }配置说明/请求访问 Vue 静态页面/api/请求转发给本地 SpringBoot 后端try_files是为了支持 Vue 路由刷新页面不 404重新加载 Nginxnginx -s reload5. 开放服务器端口服务器一定要开放80端口如果后端直接对外访问还需要开放8080。云服务器一般在安全组里配置开放TCP 80TCP 80806. 常见问题问题 1前端页面访问不到检查dist目录路径是否正确Nginx 是否有权限读取该目录。问题 2后端接口 404检查接口路径是否以/api开头SpringBoot 上下文路径是否配置正确。问题 3跨域报错前后端分离项目部署后如果还出现跨域优先检查前端baseURL和 Nginx 反向代理是否配置正确。问题 4项目重启后访问失败确认 jar 包是否还在运行服务器端口是否开放Nginx 是否重新加载成功。总结SpringBootVue 毕设项目部署核心不是 “把项目放上去” 这么简单而是要理清前端、后端、Nginx 三者的请求关系。最稳定的方式是Nginx 负责接收请求前端走 Nginx 访问后端接口走反向代理转发。本文对应的 Nginx 配置文件、SpringBoot 部署 jar 包、Vue 打包说明我已经整理成资源放在主页需要做毕设上线的同学可以参考学习仅供学习研究。