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

前言

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

项目概述

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

前端项目部署前的设置

• 环境变量区分开发 / 生产

  • 建议在前端项目中使用 .env.development、.env.production 等环境文件。
  • 本项目中，约定所有接口统一加上 /api 前缀，再由服务器反向代理到后端端口 8083。
  • 可以这样配置环境变量（开发和生产都保持一致）：

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

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

• 统一接口基础地址（在所有接口前加 /api）

  • 在代码里统一使用 import.meta.env.VITE_APP_BASE_API 作为 axios 的 baseURL，这样只需要在环境文件中改一次地址即可。

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

• 路由模式与刷新 404 问题

  • 如果使用 Vue Router 的 history 模式，需要在宝塔中为站点配置伪静态，否则刷新子路由页面会返回 404。
  • Nginx 环境下可以手动添加：

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

// vite.config.js 片段
server: {
    proxy: {
      '/images': {
        target: 'http://localhost:8083',
        changeOrigin: true
      },
      '/api': {
        target: 'http://localhost:8083',
        changeOrigin: true
      }
    }
  }

云服务器准备

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/

最后

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


部署成功。