前言
现在各类项目为了降低项目、服务模块间的高度耦合性,提出了“前后端分离”,而前后端分离的项目该如何打包呢?
一般的做法是前端项目打包完,将打包文件手动复制到后端项目工程的srcmainresourcesstatic目录下,再进行后端工程项目打包,这样手动来回复制、多次打包总是让人觉得麻烦。(即使采用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自动打包了,再也不用担心多次打包、漏打包的情况。
欢迎微信扫码下面二维码,关注微信公众号【程序猿技术大咖】,进行更多交流学习!
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net