这是一套从本地开发 → 项目打包 → 宝塔服务器配置 → 上线运行的完整教程，全程无坑，新手直接跟着操作就能上线 Web 应用。

一、前期准备——云服务器宝塔创建

1. 云服务器：阿里云 / 腾讯云 / 华为云任意（推荐 2 核 2G，CentOS 7.x/ 8.x 系统）
2. 这里我用的是腾讯云的服务器做示范；
    
3. 浏览器直接搜索腾讯云就可以找到对应的官网了；
   
4. 点击进去首先需要注册账号，如果你之前没有使用过的话，是有免费的轻量应用服务器可以试用的；
   
5. 找到产品-计算机-轻量应用服务器选项
   
6. 点击图片红框的位置，往下滑第一个产品就是
7. 试用需要你扫码完成实名认证
8. 试用成功后，回到首页点击控制台，就可以看到你的服务器了，再点击轻量应用服务器，就可以来到服务器面板了
   
9. 在登录服务器之前，你需要把服务器防火墙相应的端口都放行
   
   先创建模版，再添加放行端口
   然后应用模版
   
   必备端口：服务器安全组开放
   • 后端端口：如 8080（自定义）
   • 前端端口：80 / 443
   • 宝塔端口：8888
   • 数据库端口：3306（MySQL）
10. 接下来就可以登录了服务器了，如果你忘记了密码，可以点击服务器右上角的三个点找到重装系统，就可以重置密码了，前提是你没有压根没有使用过服务器
    
11. 正常登录后是这样子的
    
12. 接下来就可以安装宝塔面板了，这里为了便捷，我就直接使用豆包给的命令安装了：
    if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec
13. 安装完成后，在命令输出的后面几行可以看到你的默认账号密码，和宝塔面板登录的网址，浏览器中输入网址即可登录了
14. 如果你关闭了控制台，下一次打开时找不到这个网址了怎么办？不用怕，直接在终端输入bt，回车就可以调出你想要的指令了，输入14就可以找到网址了
    
15. 但是它不会显示你的宝塔面板密码，如果你有忘记，你可以重新输入bt再次调出指令，输入5修改密码
16. 成功登录宝塔面板后需要先部署好服务器的环境

---

二、第一步：SpringBoot 后端打包（本地）

1. 修改配置文件（application.yml/properties）

必须修改：数据库地址、Redis 地址、端口、允许跨域，全部改成服务器配置。

yaml

server:
  port: 8080  # 后端端口，记住这个端口！

spring:
  datasource:
    url: jdbc:mysql://服务器公网IP:3306/数据库名?useSSL=false&serverTimezone=Asia/Shanghai
    username: 数据库账号
    password: 数据库密码

# 上线后关闭swagger
springdoc:
  api-docs:
    enabled: false

2. 使用 Maven 打包

IDEA 右侧 → Maven → 你的项目 → Lifecycle → clean → package

打包完成后，在项目 target 文件夹中找到： xxx.jar（就是后端运行包）

---

三、第二步：Vue 前端打包（本地）

1. 修改前端请求地址

找到前端项目的 axios 配置文件（request.js / http.js / api.js） 把本地接口地址改成服务器后端地址：

js

运行

// 本地开发
// baseURL: 'http://localhost:8080'

// 上线部署
baseURL: 'http://服务器公网IP:8080'

2. 执行打包命令

VS Code 终端运行：

bash

运行

# Vue2/Vue3 通用
npm run build

打包完成后，项目根目录会生成：

• Vue2：dist 文件夹
• Vue3：dist 文件夹 dist 就是前端静态文件

---

四、第三步：宝塔面板配置环境

登录宝塔面板（http://服务器IP:8888）

1. 安装必备软件

打开 → 软件商店，安装以下 4 个：

1. Nginx 1.20+（必装，运行前端）
2. MySQL 5.7 / 8.0（数据库）
3. Tomcat 9（可不装，SpringBoot 内置服务器）
4. Java 项目管理器（一键运行 jar 包，强烈推荐！）
5. 可选：Redis 7.0（缓存）

2. 新建数据库

数据库 → 添加数据库

• 数据库名：和本地一致
• 用户名：自定义
• 密码：自定义
• 权限：本地 / 所有主机（推荐所有主机）

然后导入本地 SQL 数据（上传 sql 文件 → 导入）

---

五、第四步：部署 SpringBoot 后端

方法：使用「Java 项目管理器」（最简单）

1. 打开宝塔 → 文件 → 新建文件夹（如 /www/wwwroot/backend）
2. 上传本地的 xxx.jar 到这个文件夹
3. 打开 Java 项目管理器 → 添加项目
   • 项目名称：自定义
   • 项目路径：选择刚上传的 jar 包
   • 端口：8080（和配置文件一致）
   • 执行命令：默认
4. 点击启动 ✅ 出现 运行中 说明后端部署成功！

测试后端是否可用

浏览器访问：

plaintext

http://服务器IP:8080/接口地址

能返回数据 = 后端正常！

---

六、第五步：部署 Vue 前端

1. 创建前端站点

网站 → 添加站点

• 域名：如果没有域名，直接填服务器公网 IP
• 根目录：/www/wwwroot/xxx（自定义）
• PHP 版本：纯静态

2. 上传前端 dist 文件

进入站点根目录 → 删除默认文件 → 上传本地 dist 文件夹里的所有内容

3. 配置 Nginx 解决 Vue 刷新 404

站点设置 → 配置文件，在 location / { ... } 里添加：

nginx

try_files $uri $uri/ /index.html;

完整示例：

nginx

location / {
    root /www/wwwroot/xxx;
    try_files $uri $uri/ /index.html;
    index index.html;
}

保存 → 重启 Nginx

---

七、第六步：前后端联调测试

直接访问：

plaintext

http://服务器公网IP

✅ 能打开页面 ✅ 能登录、能请求数据 = 项目部署成功！

---

八、常见问题

1. 前端页面打不开

• 检查服务器安全组 80 端口是否开放
• 检查宝塔防火墙是否放行 80 端口

2. 前端能打开，但请求接口失败

• 服务器安全组放行 8080 后端端口
• 宝塔防火墙放行 8080
• 检查后端是否运行中
• 检查前端 baseURL 是否正确

3. Vue 页面刷新 404

• 必须配置 Nginx 的 try_files

4. 后端连接数据库失败

• 数据库授权改为 所有主机
• 检查账号密码是否正确
• 3306 端口已开放

---

九、项目更新上线流程（以后更新用）

1. 后端：修改代码 → maven package → 上传 jar → Java 项目管理器重启
2. 前端：修改代码 → npm run build → 上传 dist → 覆盖文件即可

---

总结

1. 后端打 jar 包，前端打 dist 包
2. 宝塔安装 Nginx + MySQL + Java 项目管理器
3. 新建数据库并导入数据
4. Java 项目管理器一键运行后端
5. Nginx 部署前端并配置刷新 404
6. 开放端口 → 访问 IP 即可上线

常用维护命令

# 查看后端是否运行

ps -ef | grep java

# 停止后端

kill -9 进程 ID

# 查看 Redis 状态

systemctl status redis

# 查看 MySQL 状态

systemctl status mysqld