🚀 一篇搞定｜学生党白嫖服务器｜前端/后端分离部署｜解决刷新404、静态资源丢失｜亲测可用

你是否曾经在本地把 Vue+SpringBoot 项目跑得飞起，但一部署到云服务器就各种 404、500、静态资源加载失败？
你是否听别人说“部署很简单”，结果自己折腾了一整天还打不开网页？
别急，这篇保姆级教程会带你从阿里云学生服务器白嫖开始，一步步把前后端分离项目真正部署到公网，并解决 Vue 路由刷新 404 和 Nginx 静态资源路径 两大经典难题。

全文干货，手把手截图，照着做就能成功！ 建议先 收藏 + 点赞，防止以后找不到。

---

📑 目录

1. 提前准备：白嫖阿里云服务器 + 本地环境
2. 部署后端：SpringBoot 项目打成 jar 包 + 宝塔 Java 项目配置
3. 部署前端：Vue 项目打包 dist + Nginx 托管
4. 两大经典坑及解决方案
   • 4.1 页面刷新后 404（Vue Router history 模式）
   • 4.2 静态资源加载失败（CSS/JS 404）
5. 最终效果展示 + 访问测试
6. 总结与延伸：如何让你的网站更安全、更快速

---

1. 提前准备：白嫖阿里云服务器 + 本地环境

1.1 免费领取阿里云服务器（学生专享）

阿里云为在校学生提供了免费的学生认证，认证后可以低价甚至免费领取云服务器（ECS 或轻量应用服务器）。
👉 点此直达阿里云学生认证地址

认证完成后，选择 “轻量应用服务器” 或 “ECS”，操作系统推荐 CentOS 7.9 或 Alibaba Cloud Linux 3，后续我们将使用 宝塔面板 简化环境配置。

1.2 本地准备

• 你已经有一个完整的 Vue 项目（能 npm run dev 正常运行）
• 你已经有一个完整的 SpringBoot 项目（能通过 IDEA 运行，并连接好 MySQL）
• 安装好 WebStorm（或 VS Code）和 IntelliJ IDEA
• 安装 Node.js、npm、Maven、Git 等基础工具

如果还没有自己的项目，可以用我开源的 WebChat 即时通讯项目 或 在线学习平台 来练手。

---

2. 部署后端：SpringBoot 项目打成 jar 包 + 宝塔 Java 项目配置

2.1 在 IDEA 中打 jar 包

1. 打开你的 SpringBoot 项目，确保 pom.xml 中 packaging 为 jar。
2. 点击右侧 Maven → Lifecycle → clean → 然后 package。
   
3. 打包成功后，在 target 目录下会生成一个 xxxx.jar 文件。
   

2.2 上传 jar 包到云服务器

推荐使用 宝塔面板 的可视化文件管理，也可以使用 WinSCP、XFTP 等工具。

• 首先在服务器根目录创建一个文件夹，例如 /www/jar/
• 将本地的 xxxx.jar 上传到该文件夹。
  

2.3 使用宝塔面板配置 Java 项目

如果你还没安装宝塔面板，先去官网复制安装命令（CentOS 为例）：

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

安装完成后，通过浏览器访问 http://你的服务器IP:8888 登录宝塔面板。

创建 Java 项目

1. 点击 网站 → Java 项目 → 添加 Java 项目。
   
2. 填写配置：
   • 项目类型：SpringBoot
   • jar 路径：选择你刚才上传的 jar 文件（如 /www/jar/demo.jar）
   • 端口：填写你项目配置文件中的端口（例如 8080）
   • ⚠️ 重要：记得在云服务器防火墙 / 安全组中 开放这个端口，否则外网无法访问。
3. 勾选 开机自启，然后点击 提交。
   

此时后端已经跑起来了，你可以通过 http://你的IP:8080/api/xxx 测试接口是否正常。

如果后端需要连接 MySQL，请先在宝塔面板中安装 MySQL，并导入你的数据库。

---

3. 部署前端：Vue 项目打包 dist + Nginx 托管

3.1 打包 Vue 项目

1. 在 WebStorm 或终端中进入 Vue 项目根目录，执行：

npm run build

2. 完成后，项目根目录会生成一个 dist 文件夹，里面包含 index.html 和静态资源（css/js/img）。
   

3.2 修改 Nginx 配置（宝塔自动管理）

在宝塔面板中，点击 网站 → 添加站点：

• 域名：填写你的 IP 或已解析的域名
• 根目录：选择 /www/server/nginx/html（这是 Nginx 默认的根目录）
• PHP 版本：选择“纯静态”

创建成功后，点击站点旁边的 设置，进入 Nginx 配置。

3.2.1 将 dist 文件复制到根目录

你可以通过宝塔的文件管理器，将本地 dist 文件夹内的 所有文件 上传到 /www/server/nginx/html 目录下，覆盖原有的 index.html。

3.2.2 修改 Nginx 配置（关键！解决刷新404）

在站点设置 → 配置文件 中，找到 location / { ... } 部分，添加 try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 你的IP或域名;
    root /www/server/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;   # 解决 Vue history 模式刷新404
    }

    # 可选：反向代理后端API（解决跨域）
    location /api/ {
        proxy_pass http://127.0.0.1:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

解释：try_files 会先按请求的 URI 查找文件，如果找不到就返回 /index.html，然后由 Vue 路由接管，从而解决刷新页面 404 的问题。

保存配置后，点击 重载 Nginx 使配置生效。

---

4. 两大经典坑及解决方案

4.1 坑一：页面刷新后 404 Not Found

现象：第一次访问 http://你的IP 能打开首页，但点击内部链接跳转到 /about 后，刷新页面就变成 404。

原因：Vue 使用了 history 模式的路由，而 Nginx 默认会去查找 /about 这个真实文件，找不到就 404。

解决方案：正如上面所述，在 Nginx 配置中添加 try_files $uri $uri/ /index.html; 即可。

4.2 坑二：静态资源加载失败（CSS/JS 404）

现象：页面能显示 HTML 结构，但样式全无，控制台报错 *.css / *.js 404。

原因：前端打包时 publicPath 配置错误，或者 Nginx 的 root 路径与 index 不一致。

解决方案：

1. 在 Vue 项目中，检查 vue.config.js 或 vite.config.js 中的 publicPath（Vue CLI3+ 为 publicPath），确保为 '/' 或相对路径。
2. 在 Nginx 配置中，确保 root 和 index 指向同一个目录，并且该目录下存在静态资源文件。

检查以下配置是否一致：

root  /www/server/nginx/html;
index /www/server/nginx/html/index.html;

同时确认 /www/server/nginx/html 目录下是否有 css、js 等子文件夹。

如果还是不行，打开浏览器开发者工具，看 404 的文件路径是什么，据此调整 Nginx 的 root。

---

5. 最终效果展示 + 访问测试

完成上述所有步骤后，在浏览器输入 http://你的服务器IP（或域名），就能看到你的项目首页啦！

验证后端接口：打开浏览器开发者工具 → Network，点击登录或获取数据，查看请求是否正常返回（注意跨域问题，可在后端加 @CrossOrigin 或 Nginx 反向代理解决）。

---

6. 总结与延伸：如何让你的网站更安全、更快速

✅ 你现在已经完成了：

• 从 0 到 1 部署前后端分离项目到公网
• 解决 Vue 路由刷新 404
• 解决静态资源加载失败
• 使用宝塔面板简化运维

🚀 下一步可以做的优化：

1. 绑定域名并配置 SSL 证书（宝塔一键申请 Let‘s Encrypt，开启 HTTPS）
2. 开启 Gzip 压缩（在 Nginx 配置中添加 gzip on;，减少传输体积）
3. 配置 CDN 加速（将静态资源上传到阿里云 OSS + CDN）
4. 使用 Docker 容器化部署（更方便迁移和扩容）
5. 接入日志监控（如 Sentry、宝塔日志分析）

📌 常见问题 FAQ

Q：为什么我按照步骤做了，访问还是 403？
A：检查根目录下是否有 index.html，以及 Nginx 运行用户（www）是否有读取权限。执行 chmod -R 755 /www/server/nginx/html。

Q：后端接口返回 502 Bad Gateway？
A：说明 Nginx 代理的后端服务没有启动。检查宝塔面板中的 Java 项目状态是否为“运行中”，以及端口是否被占用。

Q：Vue 项目打包后图片不显示？
A：检查图片路径，建议使用 require 或绝对路径，或者将图片放在 public 目录下。

---

🎁 写在最后

这篇教程几乎涵盖了 Vue + SpringBoot 项目部署到云服务器 的所有常见问题和解决方案。如果你跟着做成功了，欢迎在评论区留言“成功了”让我知道；如果遇到问题，也请带上截图提问，我会尽力帮你解决。

代码仓库推荐：

• 在线学习平台（SSM）
• WebChat 即时通讯（Vue+SpringBoot）

如果这篇文章对你有帮助，请务必：
👍 点赞 | 📝 评论 | 🔄 转发 | ⭐ 收藏

你的支持是我继续创作更多硬核干货的最大动力！

---

版权声明：本文为原创文章，未经允许不得转载。部分截图来自宝塔面板官方及阿里云官网，仅用于教学说明。