Spring Boot + Vue前后端分離項(xiàng)目，Maven自動(dòng)打包整合

作者：xcbeyond
瘋狂源自夢(mèng)想，技術(shù)成就輝煌！微信公眾號(hào)：《程序猿技術(shù)大咖》號(hào)主，專(zhuān)注后端開(kāi)發(fā)多年，擁有豐富的研發(fā)經(jīng)驗(yàn)，樂(lè)于技術(shù)輸出、分享，現(xiàn)階段從事微服務(wù)架構(gòu)項(xiàng)目的研發(fā)工作，涉及架構(gòu)設(shè)計(jì)、技術(shù)選型、業(yè)務(wù)研發(fā)等工作。對(duì)于Java、微服務(wù)、數(shù)據(jù)庫(kù)、Docker有深入了解，并有大量的調(diào)優(yōu)經(jīng)驗(yàn)。

前言
       現(xiàn)在各類(lèi)項(xiàng)目為了降低項(xiàng)目、服務(wù)模塊間的高度耦合性，提出了“前后端分離”，而前后端分離的項(xiàng)目該如何打包呢？

       一般的做法是前端項(xiàng)目打包完，將打包文件手動(dòng)復(fù)制到后端項(xiàng)目工程的src\main\resources\static目錄下，再進(jìn)行后端工程項(xiàng)目打包，這樣手動(dòng)來(lái)回復(fù)制、多次打包總是讓人覺(jué)得麻煩。（即使采用Jenkins打包部署，也會(huì)存在上面2次打包過(guò)程）

       為了解決上述問(wèn)題，我特意查詢了Maven build的相關(guān)配置及插件，發(fā)現(xiàn)解決上述問(wèn)題，通過(guò)Maven自動(dòng)打包整合其實(shí)不難，在此與大家進(jìn)行分享。

 

前后端項(xiàng)目結(jié)構(gòu)要求
      以Spring Boot + Vue的向后端項(xiàng)目為例說(shuō)明。

     通過(guò)Maven構(gòu)建項(xiàng)目，針對(duì)子父項(xiàng)目結(jié)構(gòu)創(chuàng)建前端、后端工程，結(jié)構(gòu)如下：

spring-boot-vue-parent
    |---spring-boot  # spring boot后端工程
        |---src
            |---main
                |---java
                    |---...
                |---resources
                    |---static    # 存放前端資源的目錄
        |---pom.xml   # spring-boot后端工程的pom.xml文件
    |---vue-ui       # Vue前端工程
       |---...
       |---dist    # 打包編譯時(shí)，自動(dòng)創(chuàng)建的目錄，無(wú)需手動(dòng)創(chuàng)建該目錄
       |---pom.xml # Vue前端工程的pom.xml文件，此文件可不要
 pom.xml 父工程的pom.xml文件
上述只羅列了關(guān)鍵的目錄結(jié)構(gòu)。

 

配置pom.xml文件
1、父工程的pom.xml文件

        滿足Maven 子父項(xiàng)目結(jié)構(gòu)配置要求，配置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>
        # 配置項(xiàng)目依賴包
        ……
    </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文件

       對(duì)應(yīng)Vue項(xiàng)目而言，pom.xml對(duì)它而言是不存在的，也是毫無(wú)意義的，此文件可以不要。在此體現(xiàn)出來(lái)，只是為了配置子父工程而已，凸顯出Vue工程屬于父工程的子工程而已，便于IDE導(dǎo)入呈現(xiàn)展示而已。

<?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文件是需要重點(diǎn)關(guān)注配置的，如下：

<?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>
        # 配置項(xiàng)目依賴包
        ……
    </dependencies>
 
    <build>
        <plugins>
            <!-- 插件maven-clean-plugin，用于在編譯前，清除之前編譯的文件、文件夾等，避免殘留之前的內(nèi)容 -->
            <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項(xiàng)目打包自動(dòng)生成的dist目錄 -->
                            <directory>${project.parent.basedir}/vue-ui/dist</directory>
                        </fileset>
                    </filesets>
                </configuration>
            </plugin>
 
            <!--frontend-maven-plugin為項(xiàng)目本地下載/安裝Node和NPM，運(yùn)行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>
 
            <!--資源插件，主要為了從前端項(xiàng)目里復(fù)制打包好的文件到springboot項(xiàng)目-->
            <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>
                            <!-- 復(fù)制前端打包文件到這里 -->
                            <outputDirectory>src/main/resources/static</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <!-- 從前端打包的目錄dist進(jìn)行指定文件、文件夾內(nèi)容的復(fù)制-->
                                    <directory>${project.parent.basedir}/vue-ui/dist</directory>
                                    <includes>
                                        <!-- 具體根據(jù)實(shí)際前端代碼、及目錄結(jié)構(gòu)進(jìn)行配置-->
                                        <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配置，已經(jīng)整合了前后端項(xiàng)目的Maven自動(dòng)打包，打包時(shí)，只需關(guān)注后端項(xiàng)目(spring-boot子工程)打包即可，就會(huì)將前端、后端一起打包到后端成功中。

     在子工程后端工程中，執(zhí)行打包命令mvn clean package -Dmaven.test.skip=true, 或采用IDE中相應(yīng)的Maven直接打包。

 

     至此，只需一次打包，即可完成前后端項(xiàng)目的Maven自動(dòng)打包了，再也不用擔(dān)心多次打包、漏打包的情況。