Vue + Spring Boot 宝塔部署教程（简洁通用版）
本教程适用于大多数基于 Vue 前端 + Spring Boot 后端+mysql的项目，通过宝塔面板部署在 Linux 云服务器上。建议用于学习、练手、初级部署实践。
一、准备阶段
- 云服务器推荐
阿里云服务器：阿里云轻量应用服务器
零零壹云计算（推荐）：零零云计算 9.9 元/月，国外服务器无需备案，适合练手部署单体项目
-
系统选择
建议选择 Linux 系统，如 CentOS / Ubuntu / Debian（轻量、兼容性好）。Windows Server 亦可用，但不推荐。
-
域名准备（可选）
推荐使用普通域名 + 云服务器绑定
国内域名需备案，可备注为“个人学习项目”，通过率高
二、安装宝塔面板
1.前往 宝塔官网 获取安装命令，建议选择 Linux 面板。
2.选择安装套件
3.等待 5-10 分钟，安装完成后记录面板地址、用户名和密码。
4.服务器开放端口（访问宝塔面板）
如上图宝塔面板安装在该服务器22端口，则需要在服务器的防火墙处开放该端口才能进行公网访问，如果使用的是零零壹云计算云服务器，不需要此操作，默认端口都是开放的。
同时注意，开放面板端口时，同时开放8888，888，443，20，21端口，以及3306（MySql的使用端口），6379（Redis的使用端口）
- 进入宝塔面板，访问面板地址，并输入用户名和密码。之后还需要同意协议和绑定手机号
三、宝塔的基础配置
1.进入宝塔后，看一下对应软件是否安装
2.宝塔端口放行
后端：
8082端口（这是我后端运行的端口，根据自己的项目选择，Spring Boot 应用的默认端口为8080）
前端：
80 端口，
443端口：如果配置了 HTTPS，需要放行。
宝塔面板自身：
8888 端口：宝塔面板的默认访问端口（如果未修改）。
888 端口：宝塔面板的文件管理端口。
数据库（如果需要远程访问）
3306 端口：MySQL 数据库默认端口。
6379 端口：Redis 数据库默认端口
四、部署前准备工作
在正式部署项目前，需做好以下配置和准备：
- 修改前端请求地址
在 src/utils/request.js 中配置 baseURL，确保前端能正确访问后端接口：
const isProd = true;
const baseURL = isProd ? 'http://你的公网IP:8082' : 'http://localhost:8082';
说明：
isProd 表示是否为生产环境；
本地开发阶段使用 localhost，部署上线后使用公网 IP。
- 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 字段确定当前环境；
自动引入对应环境配置文件；
若存在配置冲突，以具体环境配置为准。
五、前后端打包
- Vue 前端打包
使用如下命令对 Vue 项目进行打包：
npm run build
成功后会在项目根目录下生成 dist/ 目录，该目录为最终部署静态资源。
将 dist 目录下所有文件上传至宝塔面板中创建的网站根目录（如 /www/wwwroot/your-site/）。
- Spring Boot 后端打包
确保 Maven 已正确配置
在idear中点击maven图标，点击package进行打包，执行成功后会在 target/ 目录生成 .jar 包
六、部署打包文件上传
七、部署前端服务（Vue）
- 添加 Vue 网站项目
在【网站】中创建HTML项目，绑定域名或 IP
选择 dist 文件夹的的路径至网站根目录
- 配置 nginx 静态路由
在【设置】-【配置文件】中添加：
location / {
try_files $uri $uri/ /index.html;
}
server
{
listen 8321;
server_name 8.130.78.155_8321;
index index.html index.htm default.htm default.html;
root /www/wwwroot/yiyuan/qd;
#CERT-APPLY-CHECK--START
# 用于SSL证书申请时的文件验证相关配置 -- 请勿删除并保持这段设置在优先级高的位置
include /www/server/panel/vhost/nginx/well-known/8.130.78.155_8321.conf;
#CERT-APPLY-CHECK--END
#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END
#ERROR-PAGE-START 错误页配置，可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END
#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/html_8.130.78.155_8321.conf;
#REWRITE-END
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.hta***ess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}
#禁止在证书验证目录放入敏感文件
if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
return 403;
}
location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
error_log /dev/null;
a***ess_log /dev/null;
}
location /
{
try_files $uri $uri/ /index.html;
}
location ~ .*\\.(js|css)?$
{
expires 12h;
error_log /dev/null;
a***ess_log /dev/null;
}
a***ess_log /www/wwwlogs/8.130.78.155_8321.log;
error_log /www/wwwlogs/8.130.78.155_8321.error.log;
}
保存后重启 nginx 服务
八、部署后端服务（Spring Boot）
-
安装 Java 环境
【网站】的java项目中点击java环境管理，安装 OpenJDK（推荐 8 或 17）
-
添加 Java 项目
点击添加java项目，选择springboot项目，项目路径为之前jar包上传保存的路径，端口为后端项目的端口
九、配置数据库
-
创建MySQL数据库
-
导入 SQL 文件：
在idear中导出sql文件
通过 phpMyAdmin导入项目 SQL 文件
十、完成部署
确保端口全部放行（服务器和宝塔）
重启后端项目、nginx 服务
浏览器访问：
前端访问：http://你的域名或公网IP
后端接口调试：http://你的域名:8082/api/…
