Spring Boot + Vue前后端分离项目，Maven自动打包整合
前言
现在各类项目为了降低项目、服务模块间的高度耦合性，提出了“前后端分离”，而前后端分离的项目该如何打包呢？
一般的做法是前端项目打包完，将打包文件手动复制到后端项目工程的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插件。
4.0.0
com.xcbeyond.demo
demo
pom
1.0.0
spring-boot
vue-ui
# 配置项目依赖包
……
org.springframework.boot
spring-boot-maven-plugin
2.0.7.RELEASE
repackage
org.apache.maven.plugins
maven-compiler-plugin
3.7.0
1.8
1.8
2、Vue前端工程的pom.xml文件
对应Vue项目而言，pom.xml对它而言是不存在的，也是毫无意义的，此文件可以不要。在此体现出来，只是为了配置子父工程而已，凸显出Vue工程属于父工程的子工程而已，便于IDE导入呈现展示而已。
demo
com.xcbeyond.demo
1.0.0
4.0.0
com.xcbeyond.demo.vue.ui
vue-ui
3、后端工程的pom.xml文件
该pom.xml文件是需要重点关注配置的，如下：
demo
com.xcbeyond.demo
1.0.0
4.0.0
com.xcbeyond.demo.spring.boot
spring-boot
# 配置项目依赖包
……
org.apache.maven.plugins
maven-clean-plugin
3.1.0
src/main/resources/static
${project.parent.basedir}/vue-ui/dist
com.github.eirslett
frontend-maven-plugin
1.6
${project.parent.basedir}/vue-ui
install node and npm
install-node-and-npm
v8.12.0
6.4.1
npm install
npm
generate-resources
install
npm run build
npm
run build
org.apache.maven.plugins
maven-resources-plugin
3.1.0
copy static
generate-resources
copy-resources
src/main/resources/static
true
${project.parent.basedir}/vue-ui/dist
css/
fonts/
img/
js/
favicon.ico
index.html
打包部署
上述的pom.xml配置，已经整合了前后端项目的Maven自动打包，打包时，只需关注后端项目(spring-boot子工程)打包即可，就会将前端、后端一起打包到后端成功中。
在子工程后端工程中，执行打包命令mvn clean package -Dmaven.test.skip=true, 或采用IDE中相应的Maven直接打包。
至此，只需一次打包，即可完成前后端项目的Maven自动打包了，再也不用担心多次打包、漏打包的情况。
欢迎微信扫码下面二维码，关注微信公众号【程序猿技术大咖】，进行更多交流学习！
