You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用Gradle将多子项目(前端SPA+Spring Boot)打包为单个WAR归档?

将Spring Boot后端与SPA前端打包为单个WAR文件(Gradle实现)

我一直在用Gradle把Spring Boot后端和Angular、Vue这类JavaScript SPA前端打包成单个WAR文件,分享下我这套成熟的项目结构和配置细节:

项目目录结构

根目录/
├── build.gradle       # 根项目Gradle配置(可选,可留空或配置全局依赖)
├── settings.gradle    # 多模块配置文件
├── client/            # SPA前端模块
│   ├── build.gradle   # 前端模块Gradle配置
│   ├── src/           # 前端源码目录(Vue/Angular等源码)
│   └── dist/          # Webpack等构建工具输出的SPA产物,打包时会被纳入WAR
│       └── **/*
└── server/            # Spring Boot后端模块
    ├── build.gradle   # 后端模块Gradle配置
    ├── src/           # 后端Java源码、配置文件等
    └── build/
        └── libs/
            └── server.war  # 最终生成的合并WAR文件

根目录settings.gradle配置

首先在根目录的settings.gradle中声明两个模块,让Gradle能识别它们:

include 'client', 'server'

Server模块(Spring Boot)build.gradle核心配置

要实现前端产物和后端WAR的合并,关键是在server的构建流程中,先触发前端的构建,再把产物复制到Spring Boot的静态资源目录(Spring Boot会自动加载该目录下的静态资源):

// server/build.gradle
plugins {
    id 'war'
    id 'org.springframework.boot' version '你的Spring Boot版本号'
    id 'io.spring.dependency-management' version '对应依赖管理版本号'
}

// 确保构建server前先完成client模块的构建
evaluationDependsOn(':client')

// 自定义任务:将client的dist目录内容复制到后端静态资源目录
task copySpaToStatic(type: Copy) {
    // 依赖client的build任务,确保前端先构建完成
    dependsOn ':client:build'
    
    // 源路径:client模块的dist目录
    from project(':client').file('dist')
    // 目标路径:Spring Boot默认的静态资源目录,打包时会被包含进WAR
    into "${projectDir}/src/main/resources/static"
}

// 让WAR构建任务依赖copySpaToStatic,确保打包前自动复制前端产物
war.dependsOn copySpaToStatic

// 其他Spring Boot常规配置(依赖、JDK版本等)...

Client模块(SPA前端)build.gradle参考

针对Vue或Angular这类前端项目,需要在client的build.gradle中配置构建命令,确保执行gradle build时能生成dist目录:

// client/build.gradle
plugins {
    id 'base'
}

// 定义build任务:执行前端构建命令(根据你的项目调整)
task build(type: Exec) {
    // Vue项目用这个命令
    commandLine 'npm', 'run', 'build'
    // 如果是Angular项目,替换成:commandLine 'ng', 'build'
    workingDir projectDir
}

// 让clean任务同时清理dist目录
clean.doLast {
    delete file('dist')
}

这样配置后,只要在根目录执行gradle build,Gradle会先构建前端生成dist产物,再把产物复制到后端静态资源目录,最后打包出包含前后端的单个WAR文件,直接部署到Tomcat等容器即可。

内容的提问来源于stack exchange,提问作者Simon

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 09:28:11