<think>我们正在处理一个关于在
宝塔面板上
部署SpringBoot3和
Vue3
项目的详细步骤的查询。根据提供的引用，我们可以整合信息并给出详细步骤。引用[1]提到在
阿里云ECS上使用
宝塔面板部署SpringBoot+Vue项目，其中数据库使用Docker
部署（但作者也指出实际不建议把数据库
部署在Docker上，这里是因为特殊需求）。引用[2]提到了使用
宝塔面板部署springboot和
vue，技术栈包括
Vue3、Vite5等。引用[3]则提供了Nginx的配置示例，用于解决
Vue路由刷新404问题和设置API代理。用户明确要求
SpringBoot3和
Vue3的
部署步骤。因此，我们将结合这些引用，并考虑
SpringBoot3和
Vue3的特点，给出详细步骤。注意：由于引用中提供的信息并不完全针对
SpringBoot3和
Vue3，但
部署过程类似，我们将基于通用步骤并调整以适应新版本。
部署步骤大致分为：1
.环境准备（服务器、
宝塔面板、必要软件）2
.项目打包（
Vue3
项目打包和
SpringBoot3
项目打包）3
.项目部署（将打包好的文件放到服务器，并配置运行环境）4
.Nginx配置（用于前端访问和代理后端API）详细步骤如下：###一、环境准备1
.**购买云服务器**：选择一家云服务提供商（如
阿里云、腾讯云），购买
ECS实例。在创建实例时，可以选择带有
宝塔面板的镜像（如“
宝塔Linux
面板”），或者自行安装
宝塔面板。安装
宝塔面板的命令（以CentOS为例）：```shyuminstall-ywget&&wget-Oinstall
.shhttp://download
.bt
.cn/install/install_6
.0
.sh&&shinstall
.sh```安装完成后，记录下
宝塔面板的登录地址、用户名和密码。2
.**登录
宝塔面板**：通过浏览器访问
宝塔面板的地址（通常是`http://服务器IP:8888`），输入用户名和密码登录。3
.**安装必要软件**：在
宝塔面板中，安装以下软件（通常在“软件商店”中）：-Nginx（建议最新稳定版）-Java
项目管理器（用于
部署SpringBoot项目，或者也可以直接使用命令行运行jar包）-MySQL（如果
项目需要，建议直接安装在服务器上而非Docker，除非有特殊需求）-其他可能需要的软件（如Redis等）注意：
SpringBoot3需要JDK17或更高版本。因此，在安装Java
项目管理器后，需要确保安装并选择了正确的JDK版本。###二、
项目打包####1
.Vue3
项目打包在本地开发环境中，进入
Vue3
项目根目录，执行：```shnpmrunbuild```打包完成后，会在
项目根目录生成`dist`文件夹，里面包含静态文件（HTML、
JS、CSS等）。####2
.SpringBoot3
项目打包在
SpringBoot3
项目根目录，使用Maven或Gradle打包为可执行的jar文件：-Maven:```shmvncleanpackage```-Gradle:```shgradlecleanbuild```打包完成后，在`target`（Maven）或`build/libs`（Gradle）目录下会生成jar文件。###三、
项目部署####1
.部署Vue3
项目-在
宝塔面板中，进入“网站”菜单，点击“添加站点”。-填写域名（如果没有域名，可以填写服务器IP地址）。-在“根目录”设置中，选择一个目录（例如`/www/wwwroot/your_project`），将之前打包好的
Vue项目的`dist`文件夹内的所有文件上传到此目录下。-其他设置保持默认，点击提交。####2
.部署SpringBoot3
项目有两种常见方式：-**使用Java
项目管理器**（推荐）：1
.在
宝塔面板的“软件商店”中找到“Java
项目管理器”并安装。2
.打开Java
项目管理器，点击“添加
项目”。3
.填写
项目信息：-
项目路径：上传
SpringBoot的jar包到服务器上的某个路径（例如`/www/wwwroot/
springboot`），并选择该jar包。-
项目名称：自定义。-JDK版本：选择JDK17或更高版本。-端口：填写
SpringBoot应用运行的端口（如8090），确保该端口在防火墙中开放。-其他选项根据需求填写。4
.点击“确定”启动
项目。-**手动
部署**：1
.将jar包上传到服务器（例如`/www/wwwroot/
springboot`）。2
.通过SSH登录服务器，进入jar包所在目录，运行：```shjava-jaryour_
springboot_app
.jar```为了保持后台运行，可以使用：```shnohupjava-jaryour_
springboot_app
.jar>app
.log2>&1&```###四、配置Nginx在
宝塔面板中，找到之前创建的
Vue项目对应的网站，点击“设置”进入Nginx配置。1
.**配置前端访问**：确保在“网站目录”中已经指向了
Vue的`dist`目录。2
.**配置API代理**：在“配置修改”中（或者直接编辑站点配置文件），添加以下内容（参考引用[3]）：```nginxserver{listen80;server_namelocalhost;#如果有域名则填写域名，没有则写localhost或服务器IPlocation/{root/www/wwwroot/your_project;#替换为你的
Vue项目实际路径indexindex
.htmlindex
.htm;try_files$uri$uri//index
.html;#解决
Vue路由刷新404问题}location/api/{#根据你的后端接口路径前缀进行调整，这里假设接口以/api开头proxy_passhttp://localhost:8090/;#将/api/的请求转发到
SpringBoot应用的端口proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;}}```保存并重启Nginx。###五、测试访问1
.访问前端：在浏览器中输入服务器的IP地址或域名，查看
Vue应用是否正常加载。2
.测试后端：通过前端页面触发API请求，或者直接使用Postman等工具访问`http://服务器IP/api/xxx`，测试API是否正常返回。###六、
部署中可能遇到的问题及解决1
.**
Vue项目样式丢失或页面空白**：检查打包路径是否正确，通常需要配置
Vue项目的`
vue.config
.js`（如果使用Vite则是`vite
.config
.js`）中的`publicPath`为相对路径`
./`，然后重新打包上传。2
.**API请求404**：检查Nginx配置中的`proxy_pass`地址是否正确（后端服务是否运行在指定端口），以及接口路径前缀是否匹配。3
.**端口冲突或未开放**：确保
SpringBoot应用使用的端口没有被其他程序占用，并且在服务器的安全组（云服务器控制台）和防火墙（
宝塔面板的安全菜单）中已开放。4
.**数据库连接问题**：如果使用数据库，确保数据库服务已启动，且
SpringBoot的配置文件（如`application
.yml`）中的数据库连接信息正确（包括服务器IP、端口、用户名、密码）。###注意事项-数据库
部署：引用[1]提到使用Docker
部署数据库，但实际生产环境不建议，因为Docker对数据持久化和性能有一定影响。建议直接在服务器上安装MySQL，并确保远程连接设置（如果需要）和用户权限。-安全性：生产环境建议使用HTTPS，可以在
宝塔面板中申请SSL证书并配置。以上步骤应该能够帮助用户完成
SpringBoot3和
Vue3
项目在
宝塔面板上的
部署。§§相关问题§§1
.如何配置
Vue3
项目以解决
部署后刷新页面出现404的问题？2
.SpringBoot3
项目在服务器上运行时如何指定配置文件（如生产环境配置文件）？3
.在
宝塔面板上如何设置HTTPS访问？4
.部署SpringBoot项目时，如何设置JVM参数？</think>###
宝塔面板部署 Spring Boot 3
+ Vue 3
项目详细步骤
#### 一、环境准备
1
. **购买云服务器**
- 选择
阿里云/腾讯云等平台，购买
ECS实例
- 系统推荐：**CentOS 7
+** 或 **Ubuntu 20
.04 LTS**
- 安全组开放端口：`80`(HTTP)、`443`(HTTPS)、`8080`(
Spring Boot)、`8888`(
宝塔面板)[^1]
2
. **安装
宝塔面板**
```bash
# CentOS安装命令
yum install -y wget && wget -O install
.sh http://download
.bt
.cn/install/install_6
.0
.sh && sh install
.sh
```
- 安装完成后记录
面板地址、用户名和密码
3
. **安装必要软件**
登录
宝塔面板后，在"软件商店"安装：
- **Nginx 1
.20
+**
- **Java
项目管理器**（或手动安装JDK17
+）
- **MySQL 8
.0**（直接安装在宿主机，非Docker）
- **Redis**（可选）
#### 二、
项目打包
1
. **
Vue 3
项目打包**
```bash
npm install
npm run build # 生成 dist 目录
```
- 关键配置（`vite
.config
.js`）：
```javascript
export default defineConfig({
base: '
./', // 解决静态资源路径问题
build: {
outDir: '
../
springboot/src/main/resources/static' // 可选：打包到
Spring Boot静态目录
}
})
```
2
. **
Spring Boot 3
项目打包**
```bash
mvn clean package -DskipTests # 生成 target/*
.jar
```
- 确保`pom
.xml`包含：
```xml
<build>
<plugins>
<plugin>
<groupId>org
.springframework
.boot</groupId>
<artifactId>
spring-
boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
```
#### 三、
项目部署
1
. **
部署前端**
- 在
宝塔面板创建网站：
- 域名：填写服务器IP或域名
- 根目录：`/www/wwwroot/
vue-app`
- 将`dist`文件夹内容上传至该目录
2
. **
部署后端**
- 上传JAR包到服务器（如`/www/wwwroot/
springboot/app
.jar`）
- 通过**Java
项目管理器**添加
项目：
- JDK版本：**17
+**
-
项目路径：选择JAR文件
- 端口：`8080`（不与Nginx冲突）
- 启动命令：`java -jar app
.jar`
3
. **配置反向代理**
修改Nginx配置文件（
宝塔面板 > 网站 > 设置）：
```nginx
server {
listen 80;
server_name your-domain
.com;
# 前端路由
location / {
root /www/wwwroot/
vue-app/dist;
index index
.html;
try_files $uri $uri/ /index
.html; # 解决
Vue路由404问题
}
# 后端API代理
location /api/ {
proxy_pass http://localhost:8080/; # 转发到
Spring Boot
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
```
> 重要：`proxy_pass`末尾的`/`确保路径正确转发[^3]
#### 四、数据库配置
1
. **创建MySQL数据库**
-
宝塔面板 > 数据库 > 添加数据库
- 配置`application-prod
.yml`：
```yaml
spring:
datasource:
url: jdbc:mysql://localhost:3306/db_name?useSSL=false
username: your_user
password: your_password
```
2
. **启动
项目验证**
```bash
nohup java -jar -D
spring.profiles
.active=prod app
.jar > app
.log &
```
- 检查日志：`tail -f app
.log`
#### 五、常见问题解决
1
. **
Vue样式丢失**
- 检查`vite
.config
.js`中`base`路径配置
- 确保Nginx的`root`指向正确目录
2
. **API 404错误**
- 确认Nginx的`location /api/`代理路径匹配后端Controller前缀
- 测试后端接口：`curl http://localhost:8080/api/health`
3
. **跨域问题**
在
Spring Boot中添加配置：
```java
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*");
}
};
}
```
#### 六、HTTPS升级（可选）
1
. 宝塔面板 > SSL > Let's Encrypt 申请证书
2
. 配置Nginx 301重定向：
```nginx
server {
listen 80;
server_name your-domain
.com;
return 301 https://$host$request_uri; # HTTP跳转HTTPS
}
```
> **
部署验证**：访问`http://服务器IP`应显示
Vue页面，API请求返回200状态码[^2]
最低0.47元/天 解锁文章
扫一扫
2701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
