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自動打包了，再也不用擔心多次打包、漏打包的情況。

歡迎微信掃碼下面二維碼，關注微信公衆号【程式猿技術大咖】，進行更多交流學習！