1
Spring Boot + Vue 前后端分离项目，Maven 自动打包整合
发布于: 2020 年 07 月 24 日
一、前言
现在各类项目为了降低项目、服务模块间的高度耦合性，提出了“前后端分离”，而前后端分离的项目该如何打包呢？
一般的做法是前端项目打包完，将打包文件手动复制到后端项目工程的 src\main\resources\static 目录下，再进行后端工程项目打包，这样手动来回复制、多次打包总是让人觉得麻烦。（即使采用 Jenkins 打包部署，也会存在上面 2 次打包过程）
为了解决上述问题，我特意查询了 Maven build 的相关配置及插件，发现解决上述问题，通过 Maven 自动打包整合其实不难，在此与大家进行分享。
二、前后端项目结构要求
以 Spring Boot + Vue 的向后端项目为例说明。
通过 Maven 构建项目，针对子父项目结构创建前端、后端工程，结构如下：
spring-boot-vue-parent |---spring-boot # spring boot后端工程 |---src |---main |---java |---... |---resources |---static # 存放前端资源的目录 |---pom.xml # spring-boot后端工程的pom.xml文件 |---vue-ui # Vue前端工程 |---... |---dist # 打包编译时，自动创建的目录，无需手动创建该目录 |---pom.xml # Vue前端工程的pom.xml文件，此文件可不要 pom.xml 父工程的pom.xml文件复制代码
上述只罗列了关键的目录结构。
三、配置 pom.xml 文件
1、父工程的 pom.xml 文件
满足 Maven 子父项目结构配置要求，配置 spring-boot-maven-plugin 插件。
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.xcbeyond.demo</groupId> <artifactId>demo</artifactId> <packaging>pom</packaging> <version>1.0.0</version> <modules> <!-- spring boot后端工程，作为子工程 --> <module>spring-boot</module> <!-- Vue前端工程，作为子工程 --> <module>vue-ui</module> </modules> <dependencies> # 配置项目依赖包 …… </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.0.7.RELEASE</version> <executions> <execution> <goals> <goal>repackage</goal><!--可以把依赖的包都打包到生成的Jar包中--> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.7.0</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> </plugins> </build> </project>复制代码
2、Vue 前端工程的 pom.xml 文件
对应 Vue 项目而言，pom.xml 对它而言是不存在的，也是毫无意义的，此文件可以不要。在此体现出来，只是为了配置子父工程而已，凸显出 Vue 工程属于父工程的子工程而已，便于 IDE 导入呈现展示而已。
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>demo</artifactId> <groupId>com.xcbeyond.demo</groupId> <version>1.0.0</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.xcbeyond.demo.vue.ui</groupId> <artifactId>vue-ui</artifactId> </project>复制代码
3、后端工程的 pom.xml 文件
该 pom.xml 文件是需要重点关注配置的，如下：
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <parent> <artifactId>demo</artifactId> <groupId>com.xcbeyond.demo</groupId> <version>1.0.0</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.xcbeyond.demo.spring.boot</groupId> <artifactId>spring-boot</artifactId> <dependencies> # 配置项目依赖包 …… </dependencies> <build> <plugins> <!-- 插件maven-clean-plugin，用于在编译前，清除之前编译的文件、文件夹等，避免残留之前的内容 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> <configuration> <filesets> <fileset> <!-- 前端资源目录，即：存放前端包目录--> <directory>src/main/resources/static</directory> </fileset> <fileset> <!-- Vue项目打包自动生成的dist目录 --> <directory>${project.parent.basedir}/vue-ui/dist</directory> </fileset> </filesets> </configuration> </plugin> <!--frontend-maven-plugin为项目本地下载/安装Node和NPM，运行npm install命令--> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <workingDirectory>${project.parent.basedir}/vue-ui</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v8.12.0</nodeVersion> <npmVersion>6.4.1</npmVersion> </configuration> </execution> <!-- Install all project dependencies --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <phase>generate-resources</phase> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- Build and minify static files --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> <!--资源插件，主要为了从前端项目里复制打包好的文件到springboot项目--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>3.1.0</version> <executions> <execution> <id>copy static</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <!-- 复制前端打包文件到这里 --> <outputDirectory>src/main/resources/static</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!-- 从前端打包的目录dist进行指定文件、文件夹内容的复制--> <directory>${project.parent.basedir}/vue-ui/dist</directory> <includes> <!-- 具体根据实际前端代码、及目录结构进行配置--> <include>css/</include> <include>fonts/</include> <include>img/</include> <include>js/</include> <include>favicon.ico</include> <include>index.html</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin> </plugins> </build> </project>复制代码
四、打包部署
上述的 pom.xml 配置，已经整合了前后端项目的 Maven 自动打包，打包时，只需关注后端项目(spring-boot 子工程)打包即可，就会将前端、后端一起打包到后端成功中。
在子工程后端工程中，执行打包命令 mvn clean package -Dmaven.test.skip=true, 或采用 IDE 中相应的 Maven 直接打包。
至此，只需一次打包，即可完成前后端项目的 Maven 自动打包了，再也不用担心多次打包、漏打包的情况。
划线
评论
复制
发布于: 2020 年 07 月 24 日阅读数: 159
版权声明: 本文为 InfoQ 作者【xcbeyond】的原创文章。
原文链接:【http://xie.infoq.cn/article/1a5e316dd40851d43baa69a90】。文章转载请联系作者。
xcbeyond
关注
不为别的，只为技术沉淀、分享。 2019.06.20 加入
公众号：程序猿技术大咖，专注于技术输出、分享。
评论