在当今的互联网环境中，基于 Spring Boot 和 Vue 的全栈开发已经变得非常流行。Spring Boot 作为后端框架，能够快速开发和部署 RESTful API，而 Vue.js 则是一个流行的前端框架，用于构建优雅的用户界面。本文将介绍如何在云服务器上部署一个 Spring Boot + Vue 项目，使用宝塔面板进行管理。
环境准备
首先，我们需要准备以下环境：
- 一台云服务器（推荐使用 Ubuntu 操作系统）
- 安装 Java（OpenJDK 11 或更高版本）
- 安装 Node.js 和 npm
- 安装宝塔面板
- 安装 MySQL 数据库（可选）
1. 安装宝塔面板
登录到你的云服务器，使用以下命令安装宝塔面板：
curl -sSO https://raw.githubusercontent.com/panel-club/install/master/install.sh
bash install.sh
安装完成后，宝塔面板将提供一个访问地址和管理员账号/密码，记下这些信息，稍后在浏览器中登录。
2. 配置数据库
如果你的 Spring Boot 项目需要连接数据库，首先需要在宝塔面板中添加 MySQL 数据库。在宝塔控制台中，选择“数据库”选项，然后点击“添加数据库”，填写数据库名称、用户名和密码。
3. 打包 Spring Boot 项目
在本地开发环境中，使用 Maven 将 Spring Boot 项目打包：
mvn clean package -DskipTests
该命令会在 target 目录下生成一个 .jar 文件。
4. 部署 Spring Boot 项目
在宝塔面板中，选择“网站”选项，添加一个新的网站，配置好域名和目录。然后，将打包好的 .jar 文件上传到服务器上的网站目录中。
接下来，在云服务器中执行以下命令来运行 Spring Boot 项目：
java -jar your_project.jar --server.port=8080
你可以使用 nohup 命令来后台运行 Spring Boot 应用：
nohup java -jar your_project.jar --server.port=8080 &
5. 构建 Vue 前端项目
在你的 Vue 项目目录中执行以下命令构建发布版本：
npm install
npm run build
构建完成后，会在 dist 目录下生成前端静态文件。将 dist 目录下的文件上传到刚才添加的网站目录下。
6. 配置 Nginx 反向代理
在宝塔面板中，选择“网站”管理，找到刚才添加的网站，点击“配置” -> “反向代理”选项，添加以下配置：
/api {
reverse_proxy http://localhost:8080;
}
这将使所有对 /api 的请求都转发到 Spring Boot 后端。确保在 Nginx 的配置中添加了适当的 CORS 设置，以允许前端和后端的跨域请求。
7. 启动 Nginx 服务
在宝塔面板中，确保 Nginx 服务已经启动。你可以通过宝塔的“服务”选项来管理 Nginx 的状态。
8. 访问项目
最后，在浏览器中输入你的云服务器地址（或者你配置的域名），你应该可以看到 Vue 前端页面，通过前端界面进行数据交互时，这些请求将会被转发到 Spring Boot 后端。
总结
以上就是如何在云服务器上部署一个 Spring Boot + Vue 项目的基本流程。在实际开发中，你可能还需要处理 SSL 证书、设置防火墙规则等。在使用宝塔面板的过程中，简单易用的特性能够极大地减少你的运维复杂度，让你更专注于项目的开发和完善。希望这篇文章对你有所帮助！
