超详细！SpringBoot+Vue3 项目宝塔完整部署教程（含支付功能部署+运维实操）

目前本人在南昌从事开发工作，日常工作日工作节奏紧凑、事务繁多，没有多余时间整理技术内容，所以后续所有技术博客均会利用周六、周日业余时间更新，专注分享适配南昌本地职场、新手刚需的实战技术。

本期博客专门针对入行半年左右的开发新人量身打造，聚焦南昌 7k-9k 薪资档位初级开发岗 的核心硬性技能：SpringBoot+Vue3 宝塔线上部署。很多新人存在一个致命误区：只专注本地代码开发，项目在本地运行完美无bug，就觉得自己掌握了项目开发。

重点强调：本地项目跑得再完美，也替代不了线上宝塔生产环境。本地无端口拦截、无环境冲突、无运维压力，而企业真实线上环境需要兼顾环境配置、端口放行、服务常驻、数据备份、异常容错等能力。

在南昌初级开发求职、上岗场景中，只会本地开发、不会线上部署、不懂基础运维，基本无法达标7-9k薪资段位。企业招聘新人，不仅要求能写代码、调功能，更要求具备独立项目上线、功能部署、日常运维的能力。

本次教程按照新人最优学习落地顺序重新规整结构：项目打包 → 服务器环境搭建 → 宝塔面板详解 → 网络基础 → Linux运维指令 → 全套部署实操 → 自动化定时任务与数据保活 → 线上报错排查 → 企业级安全规范+代码落地 → 支付功能线上部署实战，零基础可一站式落地，精准适配南昌职场薪资要求。

一、前后端项目正式打包（上线前置必备）

线上部署严禁直接使用本地调试版本，必须执行生产打包，生成可部署的静态资源与可执行Jar包。

1.1 Vue3 前端生产打包

打包前务必修改生产环境接口地址，将本地 localhost 替换为服务器公网IP/域名，避免上线接口404。

# 安装依赖（首次打包/依赖更新执行）
npm install
# 正式环境压缩打包
npm run build

打包完成后根目录生成 dist 文件夹，为前端全部线上静态资源。

1.2 SpringBoot 后端生产打包

1、修改 application.yml/application.properties 生产配置：数据库、文件路径、支付参数等全部替换为线上配置；

2、IDEA 通过 Maven —— Lifecycle —— package 执行打包；

3、打包成功后 target 目录生成 Jar 可执行包，为后端部署核心文件。

二、服务器线上环境搭建（宝塔必备环境一键安装）

项目打包完成后，需提前搭建线上运行环境，无环境则项目无法启动运行。

宝塔软件商店必须安装四大核心环境：

Nginx（稳定版）：托管Vue静态资源、反向代理、解决跨域
JDK 1.8+：运行SpringBoot Jar包
MySQL 5.7/8.0：线上业务数据库
宝塔进程管理器：项目常驻、开机自启、异常重启

三、宝塔面板首页 + 左侧菜单栏完整详解（新人零基础必懂）

新手部署最大问题：只会抄步骤、不懂面板功能，出问题无法排查。本节吃透宝塔核心操作面板，搭配面板实拍图快速理解。

3.1 宝塔首页核心数据含义

首页为服务器全局监控，用于排查服务器卡顿、资源溢出、服务异常，可直观查看服务器运行核心指标：

服务器信息：CPU、内存、硬盘占用、运行时长
网站统计：已部署前端站点、SSL证书数量
数据库统计：线上数据库数量与版本
软件商店统计：已安装运维环境与工具
安全状态：防火墙拦截记录、攻击记录

3.2 左侧菜单栏高频功能详解（部署运维全覆盖）

左侧菜单栏是部署运维核心操作区，所有部署、运维、排错功能均集中在此，新人可对照截图逐一记忆核心入口：

网站（核心）：站点新建、Nginx配置、反向代理、域名、SSL配置
文件（核心）：上传Jar、dist静态资源、改配置、看日志
数据库（核心）：建库、导数据、备份、权限管理
软件商店：环境安装、版本更新、工具下载
安全：防火墙端口放行（上线必操作）
计划任务：自动化运维、定时备份、定时清理日志
终端：执行Linux命令、启停项目、排查问题
进程管理：项目守护、开机自启配置
监控：流量、资源占用实时排查

四、线上部署必备网络基础知识（解决90%线上报错）

线上80%报错不是代码Bug，是网络配置问题，新人必须掌握。

4.1 前后端分离线上部署核心逻辑

前后端线上独立运行、Nginx统一转发请求，看懂下图即可彻底理解线上部署核心原理：

Vue3前端：纯静态资源，Nginx托管，占用80/443端口
SpringBoot后端：独立Jar服务，自定义端口运行，提供接口
Nginx作用：统一入口、静态资源直接返回、接口转发后端、解决跨域

4.2 端口与防火墙核心规则

服务器端口默认封禁，必须手动放行才可外网访问，以下为宝塔防火墙端口放行实操：

服务器端口唯一、不可冲突
自定义端口必须在宝塔防火墙手动放行，否则外网无法访问
线上Nginx统一域名代理，天然解决跨域，无需后端跨域注解

4.3 IP与域名访问机制

公网IP：临时访问项目
域名：正式项目必备，需解析至服务器公网IP

五、Linux高频部署指令 + 线上日志排查教程（新人必记）

无需精通Linux，熟记部署、启停、日志排查命令即可胜任日常运维。

5.1 项目启停与进程操作指令

所有项目启停、进程管理命令，均可直接在宝塔终端执行，实操演示如下：

# 后台启动jar项目（终端关闭不宕机）
nohup java -jar demo.jar > log.out 2>&1 &

# 查看Java进程
ps -ef | grep java

# 强制关闭进程
kill -9 PID

5.2 线上日志查看（排错核心）

线上项目报错、启动失败，全部通过日志定位，实操查看方式如下：

# 查看全部日志
cat log.out

# 实时滚动日志（调试必用）
tail -f log.out

# 查看最新100行日志
tail -n 100 log.out

六、SpringBoot+Vue3 完整线上部署实操流程

6.1 后端 SpringBoot 部署流程

第一步：在宝塔文件管理器新建专属项目目录，上传打包好的Jar包：

1、文件管理器新建目录，上传Jar包；

2、宝塔防火墙放行后端端口；

3、终端执行命令启动项目；

第四步：配置进程守护，保证服务器重启、项目异常崩溃后自动启动：

4、进程管理器配置守护进程，实现开机自启、异常自动重启。

6.2 前端 Vue3 部署流程

第一步：宝塔新建静态网站站点，清空默认文件，上传前端打包dist资源：

1、宝塔网站新增纯静态站点；

2、清空默认文件，上传dist静态资源；

第二步：修改站点Nginx配置，配置路由兜底和接口反向代理：

3、配置Nginx反向代理（解决刷新404+接口转发）；

4、保存配置并重启Nginx，项目外网可访问。

server
{
    listen 80;
    server_name 你的域名/公网IP;
    index index.html index.htm;
    root /www/wwwroot/你的站点目录;

    # 解决Vue路由刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 接口转发至后端SpringBoot
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

七、宝塔自动化定时任务 + 数据自动保存方案

企业线上项目必须自动化运维，杜绝人工失误、数据丢失，所有定时任务均在宝塔计划任务配置：

7.1 宝塔计划任务核心配置

7.1.1 每日自动备份数据库

每天凌晨2点自动备份，保留7天备份文件，防止数据误删、丢失。

7.1.2 定时清理日志文件

rm -rf /www/server/springboot/log.out

7.1.3 定时重启后端服务

kill -9 $(ps -ef | grep java | grep -v grep | awk '{print $2}')
nohup java -jar /www/server/springboot/demo.jar > log.out 2>&1

7.2 双重数据自动保存机制

1、程序层实时入库+Redis缓存；

2、服务器定时数据库备份；

3、全局事务回滚+异常日志记录，杜绝脏数据。

八、项目线上常见报错与解决方案

线上90%新人报错都集中在以下场景，对照报错截图可快速定位解决：

页面正常、接口404：Nginx代理路径错误、端口未放行、前后端接口地址不统一
线上跨域报错：Nginx配置未生效、前端打包未替换线上地址
项目启动失败：日志排查（数据库配置、端口冲突、JDK版本问题）
重启服务器项目失效：未配置进程守护、开机自启

九、阿里/华为企业级宝塔运维安全规范（新人职场必守）

南昌7-9k岗位非常看重线上安全规范，新人禁止野蛮上线、禁止违规操作生产环境。

9.1 环境隔离红线（绝对禁止本地直连线上）

项目必须区分本地开发、线上生产两套环境，配置文件完全隔离，结构如下：

项目必须配置 dev本地 / prod线上 两套独立环境
本地代码、本地工具严禁直连线上数据库
打包上线必须切换 prod 生产配置

9.2 数据库企业强制规范

所有业务表必须拥有：创建人、更新人、创建时间、更新时间
所有数据禁止物理删除，统一使用逻辑删除

9.3 新人权限与上线审批规范

新人权限最小化，禁止随意改服务器配置、删数据
所有线上更新、上传、部署必须上级审核批准后执行
所有线上操作全程留痕、可追溯、可复盘

9.4 宝塔面板安全规范

禁止外网随意开放宝塔面板访问
定期重置密码、关闭无用端口

十、企业安全规范对应可直接复用代码实战

本节提供企业级规范完整源码，新人可直接复制到项目使用，适配职场上线标准。

10.1 多环境配置文件（dev/prod 完全隔离）

配置结构：application.yml + application-dev.yml + application-prod.yml

10.1.1 主配置 application.yml

# 主配置：切换环境 dev本地 / prod线上
spring:
  profiles:
    active: prod # 上线必须改为prod，本地开发用dev

server:
  tomcat:
    max-threads: 200

10.1.2 本地开发 dev

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/local_test_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: 本地数据库密码
  pay:
    wx:
      mch-id: 测试商户号
      mch-key: 测试密钥
      cert-path: 本地证书路径

10.1.3 线上生产 prod

spring:
  datasource:
    url: jdbc:mysql://服务器IP:3306/线上正式数据库?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: 线上数据库账号
    password: 线上数据库密码
  pay:
    wx:
      mch-id: 正式商户号
      mch-key: 正式密钥
      cert-path: /www/server/springboot/cert/

logging:
  file:
    path: /www/server/springboot/log/

10.2 统一数据溯源 + 逻辑删除父类 BaseEntity

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.LogicDelete;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.time.LocalDateTime;

/**
 * 企业级公共实体类
 * 阿里/华为通用数据溯源+安全规范
 * 所有业务表必须继承此类
 */
@Data
public class BaseEntity {

    /** 创建时间 */
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;

    /** 更新时间 */
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;

    /** 创建人ID */
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;

    /** 更新人ID */
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;

    /** 逻辑删除 0正常 1删除 */
    @LogicDelete
    @TableField("is_deleted")
    private Integer deleted;
}

10.3 自动填充时间、用户配置

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;
import java.time.LocalDateTime;

@Component
public class MyMetaObjectHandler implements MetaObjectHandler {

    @Override
    public void insertFill(MetaObject metaObject) {
        this.strictInsertFill(metaObject, "createTime", LocalDateTime::now, LocalDateTime.class);
        this.strictInsertFill(metaObject, "updateTime", LocalDateTime::now, LocalDateTime.class);
        this.strictInsertFill(metaObject, "createUser", () -> getCurrentUserId(), Long.class);
        this.strictInsertFill(metaObject, "updateUser", () -> getCurrentUserId(), Long.class);
    }

    @Override
    public void updateFill(MetaObject metaObject) {
        this.strictUpdateFill(metaObject, "updateTime", LocalDateTime::now, LocalDateTime.class);
        this.strictUpdateFill(metaObject, "updateUser", () -> getCurrentUserId(), Long.class);
    }

    private Long getCurrentUserId(){
        // 实际项目从登录上下文获取
        return 1L;
    }
}

十一、支付功能线上专项部署教学（企业刚需）

支付模块本地正常、线上必报错，是新人最大难点，也是南昌7-9k薪资核心考点。

11.1 线上支付核心难点

微信/支付宝禁止本地localhost回调，必须公网IP/域名 + 白名单 + 合法回调地址。

11.2 线上部署完整步骤

1、修改线上支付配置，上传支付证书至服务器指定目录：

1、修改配置：所有回调地址、商户IP、授权域名改为线上公网地址；

2、上传支付证书至服务器绝对路径，修改配置文件证书路径；

3、登录微信/支付宝商户后台，添加服务器IP白名单：

3、服务器放行80/443端口，商户后台添加服务器IP白名单；

4、保证Nginx正常转发回调接口；

5、重启项目，线上测试支付、回调、订单状态更新。

11.3 支付线上常见报错解决

支付成功订单不变：回调地址错误、IP未白名单、防火墙拦截
支付接口失败：密钥/证书路径错误、环境参数未替换
本地正常线上报错：第三方禁止本地回调，必须公网域名

十二、全文总结

本篇教程为南昌半年经验新人、7-9k薪资岗位量身定制，完整覆盖：项目打包、环境搭建、宝塔面板运维、网络原理、Linux指令、线上部署、自动化运维、企业安全规范、代码落地、支付功能上线。

核心职场结论：本地开发只是基础，线上部署、运维、安全规范、问题排查，才是新人拉开薪资差距的核心能力。

下期重磅预告：通用高可用支付SDK 开源完整版

下一期将独立开发、开源一套可直接引入、开箱即用、企业级商用标准的支付SDK，彻底解决项目重复造轮子，适配多商户、高可用、高安全场景。

SDK 核心能力全覆盖：

微信/支付宝全套支付、退款、关单、查单流程封装
参数验签、密钥脱敏、证书自动加载、安全校验体系
唯一支付流水、订单状态机、支付记录持久化
自动对账、差异比对、对账日志、异常告警
接口幂等、防重刷、分布式锁防重复提交
定时任务自动取消超时订单、定时对账清理
Mock模拟支付环境，本地无需商户即可调试
多租户、多商户动态切换适配
支付风控、频率拦截、异常订单监控溯源

下期全程源码开源+手把手教学+打包部署+项目接入实战，帮助新人突破初级开发技术瓶颈！

后续大家在公司项目中对接支付业务，无需每次都重复编写繁杂的支付底层逻辑。我会将这套完善的支付SDK开源上传至Gitee，大家后续开发可以直接克隆源码，快速集成到任意Java后端项目中，彻底告别重复造轮子的低效开发方式。同时，我会为这套SDK开发可视化管理界面，降低学习和使用门槛，大家可以在本地环境自行调试、熟悉完整的支付对接、回调处理、订单流转流程，提前吃透业务逻辑，为职场项目开发打好基础。

后续企业真实业务对接支付时，开发流程会极大简化：只需让业务方提供商户号、支付密钥、证书文件、授权域名等合规资料，一键替换项目配置，直接调用我封装好的支付、退款、查单、自动对账等标准化接口，就能快速完成支付功能落地上线，高效适配企业快速迭代的业务需求，大幅提升职场开发效率。

（注：部分内容可能由 AI 生成）

posted @ 2026-07-11 23:43 白鹿为溪阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

bailu12

超详细！SpringBoot+Vue3 项目宝塔完整部署教程（含支付功能部署+运维实操）

超详细！SpringBoot+Vue3 项目宝塔完整部署教程（含支付功能部署+运维实操）

一、前后端项目正式打包（上线前置必备）

1.1 Vue3 前端生产打包

1.2 SpringBoot 后端生产打包

二、服务器线上环境搭建（宝塔必备环境一键安装）

三、宝塔面板首页 + 左侧菜单栏完整详解（新人零基础必懂）

3.1 宝塔首页核心数据含义

3.2 左侧菜单栏高频功能详解（部署运维全覆盖）

四、线上部署必备网络基础知识（解决90%线上报错）

4.1 前后端分离线上部署核心逻辑

4.2 端口与防火墙核心规则

4.3 IP与域名访问机制

五、Linux高频部署指令 + 线上日志排查教程（新人必记）

5.1 项目启停与进程操作指令

5.2 线上日志查看（排错核心）

六、SpringBoot+Vue3 完整线上部署实操流程

6.1 后端 SpringBoot 部署流程

6.2 前端 Vue3 部署流程

七、宝塔自动化定时任务 + 数据自动保存方案

7.1 宝塔计划任务核心配置

7.1.1 每日自动备份数据库

7.1.2 定时清理日志文件

7.1.3 定时重启后端服务

7.2 双重数据自动保存机制

八、项目线上常见报错与解决方案

九、阿里/华为企业级宝塔运维安全规范（新人职场必守）

9.1 环境隔离红线（绝对禁止本地直连线上）

9.2 数据库企业强制规范

9.3 新人权限与上线审批规范

9.4 宝塔面板安全规范

十、企业安全规范对应可直接复用代码实战

10.1 多环境配置文件（dev/prod 完全隔离）

10.1.1 主配置 application.yml

10.1.2 本地开发 dev

10.1.3 线上生产 prod

10.2 统一数据溯源 + 逻辑删除父类 BaseEntity

10.3 自动填充时间、用户配置

十一、支付功能线上专项部署教学（企业刚需）

11.1 线上支付核心难点

11.2 线上部署完整步骤

11.3 支付线上常见报错解决

十二、全文总结

下期重磅预告：通用高可用支付SDK 开源完整版

公告