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 启动时将：

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

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

3. 若存在配置冲突，以具体环境配置为准。

✅ 多环境配置有助于提升部署安全性、减少环境冲突问题。

---

五、前后端打包

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 文件
  
  

---

十、完成部署

1. 确保端口全部放行（服务器和宝塔）

2. 重启后端项目、nginx 服务

3. 浏览器访问：

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

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

至此，前后端分离项目部署完毕，可访问测试。

---

如果你觉得这篇文章对你有帮助，欢迎点赞收藏 ❤️
也可以关注我，一起交流成长，后续会持续分享前后端开发、部署实战和项目经验～💻✨