一、前言（含互动）

大家好！最近我完成了一个基于 Vue.js + Spring Boot 的前后端分离项目，并成功部署到了阿里云服务器。过程中踩了不少坑，今天整理出来分享给大家，希望能帮助到正在学习部署的同学 ��

�� 本文适合谁？

• 刚学完 Vue/Spring Boot 想做完整项目的同学
• 想把项目部署到云服务器让别人访问的同学
• 遇到 CORS 跨域、端口不通、图片不显示等问题的同学

�� 互动提问：你第一次部署项目时遇到了什么奇葩问题？欢迎在评论区留言分享~

二、环境准备（带表情）

2.1 购买云服务器 ☁️

我使用的是阿里云 ECS（2核2G，CentOS 7.9）。购买后获得公网 IP： 101.132.38.185 。

2.2 安装宝塔面板 ��

登录服务器终端，执行：

yum install -y wgetwget -O install.sh http://download.bt.cn/install/install_6.0.shsh install.sh ed8484bec

安装完成后，保存好面板地址和账号密码！⚠️ 这一步很多人会忘记保存。

（此处插入截图，说明：成功进入面板）

2.3 开放端口 ��

在宝塔【安全】和阿里云安全组中放行以下端口：

端口	用途	是否必须
8081	前端访问	✅
8763	后端API	✅
3306	MySQL	可选
8888	宝塔面板	✅

�� 小提示：端口放行后要重启 Nginx或重载防火墙规则才能生效。

三、后端部署 ��

3.1 打包 Spring Boot 项目

在 IDEA 终端执行：

mvn clean package -DskipTests

-DskipTests 可以跳过测试，加快打包速度。如果你的测试用例很多，强烈建议加上。

打包成功后，target/ems-0.0.1-SNAPSHOT.jar就是我们要的文件。

3.2 上传 jar 包

通过宝塔文件管理器，把 jar 包传到/www/wwwroot/backend/目录。

3.3 启动后端服务

cd /www/wwwroot/backendnohup java -jar ems-0.0.1-SNAPSHOT.jar --server.address=0.0.0.0 > log.out 2>&1 &

命令解释：

• nohup：退出终端后不关闭进程
• --server.address=0.0.0.0：允许所有IP访问
• > log.out 2>&1：日志输出到文件，方便排查错误

3.4 验证后端是否启动 ✅

ps -ef | grep java # 查看进程tail -f log.out # 实时查看日志

看到Started EmsApplication就表示启动成功！

3.5 测试后端接口

浏览器访问：http://你的IP:8763/home/api/testString

返回HelloSpringBoot！欢迎来到柳职大→ 完美 ��

四、前端部署 ��

4.1 Vue 项目打包

npm run build

生成dist文件夹，包含index.html+ css/js 文件。

4.2 配置 Nginx 反向代理（解决 CORS） ��

这是最关键的一步！因为前后端端口不同，直接请求会报 CORS 错误。

在宝塔网站配置文件中添加：

server { listen 8081; server_name 你的IP; root /www/wwwroot/vue8081; index index.html; location / { try_files $uri $uri/ /index.html; } # 反向代理：将 /api/ 请求转发到后端 location /api/ { proxy_pass http://127.0.0.1:8763/; proxy_set_header Host $host; }}

4.3 上传前端文件

将dist内所有文件上传到/www/wwwroot/vue8081/。

4.4 重载 Nginx

nginx -t # 检查语法nginx -s reload # 重新加载

五、遇到的坑 & 解决方案 ⚠️

❌ 坑1：CORS 跨域报错

现象：浏览器控制台红字No 'Access-Control-Allow-Origin' header is present。

原因：前端直接请求了后端 IP:端口，浏览器拦截。

✅解决：使用 Nginx 反向代理（上面已配）。

�� 互动：你遇到过跨域吗？你是用 JSONP 还是后端配置解决的？评论区聊一聊~

❌ 坑2：端口不通

现象：页面打不开，curl 也失败。

原因：宝塔防火墙和阿里云安全组都没放行端口。

✅解决：两个地方都要添加端口规则！很多同学只做了一边。

�� 小贴士：测试端口是否通可以用telnet IP 端口。

❌ 坑3：数据库表不存在

现象：注册时返回 500 错误。

原因：只创建了数据库，没有导入表结构。

✅解决：执行项目中的 SQL 文件。

mysql -u root -p ems < /路径/ems.sql

�� 截图9：数据库表列表

❌ 坑4：照片不显示

现象：页面左侧头像区域空白。

原因：Vue 中图片路径写错了。

✅解决：使用require引入图片。

<!-- 错误 ❌ --><img src="/src/assets/1.jpg"><!-- 正确 ✅ --><img :src="require('@/assets/1.jpg')">

六、最终效果展示 ��

部署成功后，访问http://你的IP:8081：

• 左侧：个人照片 + 学号/姓名/班级/考核日期
• 右侧：登录/注册表单，可切换

七、总结 & 互动 ��

通过这次部署，我掌握了：

• ✅ 云服务器基本操作
• ✅ 宝塔面板 + Nginx 配置
• ✅ Spring Boot 打包与后台运行
• ✅ Vue 打包与静态部署
• ✅ 解决 CORS 跨域的两种方式
• ✅ 排查端口、数据库、图片等常见问题

�� 欢迎大家在评论区交流部署经验！

如果你按此教程成功部署了，记得回来报个喜 ��

觉得有用的话，点赞 + 收藏支持一下作者吧~ ❤️