<think>我们正在处理将
Vue3项目
打包并部署到
SpringBoot项目中的需求。根据引用内容，有几种部署方式：生成
war包通过Tomcat运行，或者生成jar
包直接运行。此外，引用[4]提到了使用Nginx部署前后端分离的项目，但用户明确要求将
Vue3项目
打包部署到
SpringBoot中，因此我们主要关注将
Vue3构建的
静态资源整合到
SpringBoot项目中。步骤概述：1.构建
Vue3项目，生成
静态资源文件（dist
目录）2.将dist
目录下的文件复制到
SpringBoot项目的资源
目录（通常是src/main/resources/static）3.配置
SpringBoot项目，确保能够正确提供
静态资源4.
打包SpringBoot项目（jar或
war）5.部署运行详细步骤：步骤1：构建
Vue3项目在
Vue3项目根
目录下执行构建命令（假设使用Vite）：```bashnpmrunbuild```构建完成后，会在项目根
目录生成`dist`
目录，里面
包含静态文件（index.html,js,css,图片等）。步骤2：将
静态资源复制到
SpringBoot项目将
Vue3项目dist
目录下的所有文件复制到
SpringBoot项目的`src/main/resources/static`
目录下（如果没有static
目录，则创建）。步骤3：配置
SpringBoot项目确保
SpringBoot项目能够正确提供
静态资源。
SpringBoot默认会从`classpath:/static`、`classpath:/public`等
目录提供
静态资源。如果使用
war包部署并需要继承`
SpringBootServletInitializer`，则按照引用[1][^1]和引用[2][^2]的方式，创建一个类继承`
SpringBootServletInitializer`并覆盖`configure`方法。例如，在
SpringBoot项目中创建`ServletInitializer`类：```javapackagecom.example.demo;//替换为你的
包名importorg.springframework.boot.builder.SpringApplicationBuilder;importorg.springframework.boot.web.servlet.support.
SpringBootServletInitializer;publicclassServletInitializerextends
SpringBootServletInitializer{@OverrideprotectedSpringApplicationBuilderconfigure(SpringApplicationBuilderapplication){returnapplication.sources(DemoApplication.class);//替换为你的
SpringBoot主启动类}}```步骤4：
打包SpringBoot项目4.1如果
打包为jar
包，在pom.xml中添加spring-boot-maven-plugin插件（如引用[3][^3]）：```xml<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>```然后在项目根
目录下执行Maven命令：```bashmvncleanpackage```生成的jar
包位于target
目录下。4.2如果
打包为
war包，需要修改pom.xml中的
打包方式：```xml<packaging>
war</packaging>```并确保有servlet相关的依赖（如果使用内嵌Tomcat，需要将Tomcat作用域设置为provided）：```xml<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope></dependency>```然后同样执行`mvncleanpackage`，生成
war包。步骤5：部署运行-jar
包：使用`java-jaryour-application.jar`运行。-
war包：将
war包放入Tomcat的webapps
目录下，启动Tomcat即可。注意事项：1.确保
Vue3项目中的路由模式与
SpringBoot的
静态资源服务兼容。如果使用history模式，需要在
SpringBoot中配置一个全局的URL重写，将所有的前端路由请求都转发到index.html。这可以通过添加一个
SpringBoot的控制器来实现：```java@ControllerpublicclassFrontendController{@RequestMapping(value="/{path:[^\\.]*}")publicStringredirect(){return"for
ward:/index.html";}}```或者使用配置方式（实现WebMvcConfigurer）添加ViewController。2.如果
Vue3项目中有调用后端API的请求，在开发环境下通常配置了代理（proxy），但在生产环境中，需要确保请求的URL指向正确的后端地址。可以在
Vue3项目的构建前设置环境变量，或者构建后修改静态文件中的配置（如果支持）。另一种方式是在
SpringBoot中提供API接口，这样前后端同源，就不会有跨域问题。3.如果使用前后端分离部署（即
Vue3项目单独部署在Nginx等服务器上，
SpringBoot只提供API），则不需要将
静态资源放入
SpringBoot项目中。但根据用户需求，我们是将
静态资源整合到
SpringBoot中。4.引用[4][^4]提到了使用Nginx部署，但用户要求的是部署到
SpringBoot中，因此我们不考虑Nginx。总结：将
Vue3构建的
静态资源放入
SpringBoot的static
目录，然后
打包SpringBoot项目，即可将
Vue3项目整合到
SpringBoot中运行。下面我们通过一个简单的示例来演示：示例步骤：1.在
Vue3项目（假设项目名为my-
vue-app）中运行`npmrunbuild`，生成dist
目录。2.将dist
目录下的所有文件复制到
SpringBoot项目（假设项目名为my-spring-boot）的`src/main/resources/static`
目录。3.在
SpringBoot项目中，如果使用history路由，添加一个控制器来处理前端路由（如上所述）。4.
打包SpringBoot项目（jar或
war）。5.运行jar
包或部署
war包到Tomcat。这样就完成了
Vue3项目在
SpringBoot中的部署。相关问题：1.如何解决
Vue3项目部署到
SpringBoot后的路由404问题？2.如何配置
Vue3项目的生产环境API请求地址？3.如何优化
SpringBoot打包后的
静态资源加载速度？4.如何实现
SpringBoot项目与
Vue3项目的热部署或快速迭代？</think>#
Vue3项目
打包部署到
SpringBoot的详细步骤
下面是将
Vue3项目
打包并集成到
SpringBoot应用的完整
流程，
包含两种部署方式：jar
包部署和
war包部署。
## 一、
Vue3项目
打包步骤
### 1. 配置生产环境API地址
在
Vue3项目的`.env.production`文件中配置后端API地址：
```ini
VITE_API_BASE_URL=/api
```
### 2. 构建
Vue3项目
```bash
npm run build
```
构建完成后会在项目根
目录生成`dist`
目录，
包含
静态资源文件
## 二、
SpringBoot项目配置
### 1. 创建
SpringBoot项目结构
```
src/
├── main/
│ ├── java/
│ ├── resources/
│ │ ├── static/ # 存放
Vue3构建结果
│ │ └── templates/
└── pom.xml
```
### 2. 复制
Vue3构建结果
将
Vue3项目的`dist`
目录内容复制到
SpringBoot的`src/main/resources/static`
目录
### 3. 添加前端路由处理控制器
```java
@Controller
public class FrontendController {
@GetMapping(value = {
"/",
"/login",
"/dashboard",
"/profile/{path:.*}" // 添加所有前端路由路径
})
public String for
ward() {
return "for
ward:/index.html";
}
}
```
## 三、
打包部署方式
### 方式1：
打包为可执行JAR（推荐）
#### 1. 配置pom.xml
```xml
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*</include>
</includes>
</resource>
</resources>
</build>
```
#### 2. 构建JAR
包
```bash
mvn clean package
```
#### 3. 运行应用
```bash
java -jar target/your-application.jar
```
### 方式2：
打包为
WAR部署到Tomcat
#### 1. 修改pom.xml
```xml
<packaging>
war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
```
#### 2. 添加Servlet初始化类
```java
public class ServletInitializer extends
SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
return builder.sources(YourApplication.class);
}
}
```
#### 3. 构建
WAR包
```bash
mvn clean package
```
#### 4. 部署到Tomcat
将生成的
WAR文件复制到Tomcat的`webapps`
目录并启动Tomcat
## 四、关键配置说明
### 1.
静态资源配置
SpringBoot默认从以下位置提供
静态资源：
- `classpath:/static`
- `classpath:/public`
- `classpath:/resources`
- `classpath:/META-INF/resources`
### 2. 解决跨域问题（可选）
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
```
### 3. 配置API代理（可选）
```java
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/**")
public ResponseEntity<?> proxyApi(HttpServletRequest request) {
// 实现API转发逻辑
return restTemplate.exchange(
"http://backend-service" + request.getRequestURI(),
HttpMethod.valueOf(request.getMethod()),
new HttpEntity<>(request.getBody(), headers),
byte[].class
);
}
}
```
## 五、验证部署结果
1. 访问
SpringBoot应用根URL（如：http://localhost:8080）
2. 应显示
Vue3应用的首页
3. 验证前端路由是否正常工作
4. 测试API接口调用是否正常
## 六、部署架构图
```mermaid
graph TD
A[
Vue3项目] -->|构建| B(dist静态文件)
B --> C[复制到
SpringBoot static
目录]
D[
SpringBoot应用] -->|
打包| E[JAR/
WAR]
E -->|部署| F[服务器]
G[客户端浏览器] -->|访问| F
F -->|提供
静态资源| G
F -->|处理API请求| H[后端服务]
```
## 常见问题解决
1. **路由404问题**：确保添加了前端路由控制器
2. **
静态资源加载失败**：检查文件是否在正确
目录（static
目录）
3. **API调用失败**：检查API代理配置是否正确
4. **跨域问题**：在开发环境配置代理，生产环境使用CORS配置
本文详细介绍了如何将Vue项目与Springboot整合，打包成War包的过程。主要步骤包括配置和打包，最终在工程的out文件夹中获取到不含Tomcat依赖的War包。
最低0.47元/天 解锁文章
扫一扫
7936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
