Vue + Spring Boot 宝塔部署教程（简洁通用版）

Vue + Spring Boot 宝塔部署教程（简洁通用版）
本教程适用于大多数基于 Vue 前端 + Spring Boot 后端+mysql的项目，通过宝塔面板部署在 Linux 云服务器上。建议用于学习、练手、初级部署实践。
一、准备阶段

1. 云服务器推荐
   阿里云服务器：阿里云轻量应用服务器

零零壹云计算（推荐）：零零云计算 9.9 元/月，国外服务器无需备案，适合练手部署单体项目

2. 系统选择
   建议选择 Linux 系统，如 CentOS / Ubuntu / Debian（轻量、兼容性好）。Windows Server 亦可用，但不推荐。
   

3. 域名准备（可选）
   推荐使用普通域名 + 云服务器绑定

国内域名需备案，可备注为“个人学习项目”，通过率高
二、安装宝塔面板
1.前往 宝塔官网 获取安装命令，建议选择 Linux 面板。

2.选择安装套件

3.等待 5-10 分钟，安装完成后记录面板地址、用户名和密码。

4.服务器开放端口（访问宝塔面板）
如上图宝塔面板安装在该服务器22端口，则需要在服务器的防火墙处开放该端口才能进行公网访问，如果使用的是零零壹云计算云服务器，不需要此操作，默认端口都是开放的。
同时注意，开放面板端口时，同时开放8888，888，443，20，21端口，以及3306（MySql的使用端口），6379（Redis的使用端口）

5. 进入宝塔面板，访问面板地址，并输入用户名和密码。之后还需要同意协议和绑定手机号
   

三、宝塔的基础配置
1.进入宝塔后，看一下对应软件是否安装

2.宝塔端口放行
后端：
8082端口（这是我后端运行的端口，根据自己的项目选择，Spring Boot 应用的默认端口为8080）
前端：
80 端口，
443端口：如果配置了 HTTPS，需要放行。
宝塔面板自身：
8888 端口：宝塔面板的默认访问端口（如果未修改）。
888 端口：宝塔面板的文件管理端口。
数据库（如果需要远程访问）
3306 端口：MySQL 数据库默认端口。
6379 端口：Redis 数据库默认端口
四、部署前准备工作
在正式部署项目前，需做好以下配置和准备：

1. 修改前端请求地址
   在 src/utils/request.js 中配置 baseURL，确保前端能正确访问后端接口：

const isProd = true;
const baseURL = isProd ? 'http://你的公网IP:8082' : 'http://localhost:8082';

说明：
isProd 表示是否为生产环境；
本地开发阶段使用 localhost，部署上线后使用公网 IP。

2. Spring Boot 多环境配置
   为实现开发与生产环境的隔离，Spring Boot 推荐采用多环境配置：

配置文件结构：
在 resources/ 目录下创建如下配置文件：

application.yml             # 公共配置入口
application-dev.yml         # 开发环境配置
application-prod.yml        # 生产环境配置

application.yml 示例：

spring:
  profiles:
    active: prod  # 指定当前激活环境

配置说明：
application-dev.yml：配置本地数据库、调试日志、跨域策略等；

application-prod.yml：配置生产数据库、禁用调试日志、收紧跨域权限等。

启动原理：
Spring Boot 启动时将：

加载 application.yml，根据 active 字段确定当前环境；

自动引入对应环境配置文件；

若存在配置冲突，以具体环境配置为准。
五、前后端打包

1. Vue 前端打包
   使用如下命令对 Vue 项目进行打包：

npm run build

成功后会在项目根目录下生成 dist/ 目录，该目录为最终部署静态资源。

将 dist 目录下所有文件上传至宝塔面板中创建的网站根目录（如 /www/wwwroot/your-site/）。

2. Spring Boot 后端打包
   确保 Maven 已正确配置

在idear中点击maven图标，点击package进行打包，执行成功后会在 target/ 目录生成 .jar 包

六、部署打包文件上传

七、部署前端服务（Vue）

1. 添加 Vue 网站项目
   在【网站】中创建HTML项目，绑定域名或 IP

选择 dist 文件夹的的路径至网站根目录

2. 配置 nginx 静态路由
   在【设置】-【配置文件】中添加：

location / {
    try_files $uri $uri/ /index.html;
}

保存后重启 nginx 服务

八、部署后端服务（Spring Boot）

1. 安装 Java 环境
   【网站】的java项目中点击java环境管理，安装 OpenJDK（推荐 8 或 17）
   

2. 添加 Java 项目
   点击添加java项目，选择springboot项目，项目路径为之前jar包上传保存的路径，端口为后端项目的端口
   

九、配置数据库

1. 创建MySQL数据库
   
   

2. 导入 SQL 文件：
   在idear中导出sql文件

通过 phpMyAdmin导入项目 SQL 文件

十、完成部署
确保端口全部放行（服务器和宝塔）

重启后端项目、nginx 服务

浏览器访问：

前端访问：http://你的域名或公网IP

后端接口调试：http://你的域名:8082/api/…