宝塔面板部署 Vue+Springboot 前后端分离项目

前言

本文记录一个宠物商店后台管理系统项目在宝塔面板上的部署流程，前端使用 Vue，后端为 Spring Boot。下文按“先部署后端，再部署前端”的顺序来说明。
这篇教程是半年前部署一个零工平台前后端项目时写的，写了一半停了，最近又部署了一个顺便把它完善一下。

项目概述

• 前端：vue 项目
• 后端：Spring Boot 3.3.5 + Java 17 + SQLite 数据库
• 域名：https://petad.xuan.cyou
• 后端端口：8083

前端项目部署前的设置

配置说明：API 接口路径与环境设置

一般项目支持两种常见的接口路径配置方式，请根据后端接口的实际路径选择对应的方案。

场景一：接口已统一包含 /api 前缀（本项目选择）

若后端所有接口已统一添加 /api 前缀（例如：/api/product/list），则前端环境变量配置如下：

# .env.development
VITE_APP_BASE_API=http://localhost:8083

# .env.production
VITE_APP_BASE_API=https://petad.xuan.cyou

在 axios 实例中直接使用该变量作为 baseURL：

// src/api/request.js 片段
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API || 'http://localhost:8083',
    timeout: 10000
})

各接口定义中需添加 /api 前缀：

// 示例接口：获取商品列表
export function getProductList(params) {
    return request({
        url: '/api/product/list', // 添加/api前缀
        method: 'get',
        params
    })
}

场景二：接口未统一添加 /api 前缀

若后端接口未统一添加 /api 前缀，则可将前缀直接配置在环境变量中：

# .env.development
VITE_APP_BASE_API=http://localhost:8083/api

# .env.production
VITE_APP_BASE_API=https://petad.xuan.cyou/api

在 axios 配置中直接使用完整基础路径：

// src/api/request.js 片段
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API || 'http://localhost:8083/api',
    timeout: 10000
})

此时，接口定义中不再需要 /api 前缀：

// 示例接口：获取商品列表
export function getProductList(params) {
    return request({
        url: '/product/list', // 无需/api前缀
        method: 'get',
        params
    })
}

通用配置：开发环境代理

无论选择上述哪种场景，在开发环境下均需在 vite.config.js 中配置代理，以便正确转发请求至后端服务：

// vite.config.js 片段
server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8083', // 后端服务地址
        changeOrigin: true
      },
      '/images': {
        target: 'http://localhost:8083',
        changeOrigin: true
      }
    }
}

补充说明：路由模式与刷新 404 问题

如果项目使用 Vue Router 的 history 模式，部署后刷新非首页路由可能出现 404 错误。此时需在 Web 服务器（如 Nginx）中配置伪静态规则，将请求重定向至 index.html。

以 Nginx 为例，可添加如下配置：

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

云服务器准备

1.选购

• 我选用的是阿里云的云服务器，如果只是临时部署这个项目作为演示，选择最低配的就可以。
• 镜像直接选择宝塔的应用镜像就行
• 如果有别的需求，尽量选择Debian，Centos Stream，Ubuntu等
• 如果选择的是上面三个，你需要手动配置宝塔面板并开放访问端口

2.查看面板登录信息

宝塔配置

1. 登录并进入面板

2. 创建一个静态网站

我用的是 SQLite，这里无需新创建数据库。

申请免费SSL证书，启用https

3. 上传项目前端代码

将前端打包后的 dist 目录上传到这里

修改网站运行目录为 dist

4. 上传项目数据库

在网站目录 /www/wwwroot/petad.xuan.cyou 下上传项目数据库

选择完文件后，点击 管理，可以看到数据库里的表就可以了。

5. 上传后端 SpringBoot 打包后的 jar 包

如果你不知道如何把 SpringBoot 项目打包，可以参考这篇文章

6. 配置后端

添加 jar 包和 JDK（与开发环境一致）

开放端口 8083

7. 配置反向代理

这里的 8083 即为后端的运行端口

注意配置文件写法是否正确，否则不会生效

图片代理

下面为代理的完整代码：

#PROXY-START/
location /api
{
    proxy_pass http://127.0.0.1:8083;
    proxy_set_header Host 127.0.0.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_fileMUGM8Xk5 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileMUGM8Xk5 1;
        expires 1m;
        }
    if ( $static_fileMUGM8Xk5 = 0 )
    {
    add_header Cache-Control no-cache;
    }
}
 # 图片资源代理
    location /images {
        proxy_pass http://localhost:8083/images;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 静态资源缓存
        expires 30d;    
    }
#PROXY-END/

最后

对部署的域名进行访问测试


部署成功。