前言

现在各类项目为了降低项目、服务模块间的高度耦合性，提出了“前后端分离”，而前后端分离的项目该如何打包呢？

一般的做法是前端项目打包完，将打包文件手动复制到后端项目工程的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自动打包了，再也不用担心多次打包、漏打包的情况。

欢迎微信扫码下面二维码，关注微信公众号【程序猿技术大咖】，进行更多交流学习！

Spring Boot + Vue前后端分离项目，Maven自动打包整合相关推荐

phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
spring boot+vue前后端分离项目问题总结
目录创建项目安装vue脚手架报错 vue命令创建项目失败项目导入idea idea过期激活 idea运行vue项目,打开地址为http://0.0.0.0:8080 项目目录 vue文件不显示V ...
Spring Boot+Vue前后端分离项目接入科大讯飞——语音评测
因为讯飞官方提供的sdk没有Java的,所以我使用的是WebApi.其中有些注意事项官网有写出,可自行查看. 下面是具体的接入过程: 下载这个demo 然后把里面的三个文件复制到项目里主要用到的是F ...
Spring boot+Vue前后端分离项目实战——学生管理系统【三】后端
就不一段一段的贴代码了,讲一下代码结构,之后会将代码放在GitHub,将代码拉到自己电脑后对照学习代码地址 https://github.com/SAGE-likeWu/student_manage ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
Spring Boot + Vue前后端分离（一）前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务和前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索副业赚钱渠道,在提升技术的同时我们一起交流敏捷流程提高工作效率 ...
Spring Boot + Vue 前后端分离
前后端分离 Spring Booot + Vue 开发单页面应用前言需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网 ...
Spring Boot + Vue 前后端分离开发，权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...

Spring Boot + Vue前后端分离项目，Maven自动打包整合

前言

前后端项目结构要求

配置pom.xml文件

打包部署

Spring Boot + Vue前后端分离项目，Maven自动打包整合相关推荐

最新文章

热门文章