前言
现在各类项目为了降低项目、服务模块间的高度耦合性,提出了“前后端分离”,而前后端分离的项目该如何打包呢?
一般的做法是前端项目打包完,将打包文件手动复制到后端项目工程的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>