写点什么

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

用户头像
xcbeyond
关注
发布于: 2020 年 07 月 24 日
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 插件。

<?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
用户头像

xcbeyond

关注

不为别的,只为技术沉淀、分享。 2019.06.20 加入

公众号:程序猿技术大咖,专注于技术输出、分享。

评论

发布
暂无评论
Spring Boot + Vue前后端分离项目,Maven自动打包整合