目前，vue.js和Spring boot技術很火爆，但是兩者如何整合在一起呢。本文將給出兩者整合的思路。

思路介紹

首先使用vue-cli腳手架工具搭建好前臺框架，隨後通過maven將Spring boot 後臺和vue前臺進行整合。重點就在於這個maven的pom配置該如何寫。

後臺pom檔案沒有什麼特殊的地方，前臺pom的話，其主要思路是：
- Step 1: npm install
- Step 2: npm run build
- Step 3: 刪除Spring boot後臺public下的檔案
- Step 4:將npm run build產生的編譯檔案拷貝到後臺的public下，至此完成。

前臺配置介紹

首先，請在機器上下載並安裝node.js。這是必備的步驟。

找到frontend/config/index.js檔案並替換以下行：

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

同

index: path.resolve(__dirname, '../target/dist/index.html'),
assetsRoot: path.resolve(__dirname, '../target/dist'),

編寫pom如下：

<?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>SpringBoot-Vue</artifactId
 
>
        <groupId>com.zju.study</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>frontend</artifactId>

    <profiles>    <!--考慮到window 和linux環境 npm命令格式的問題，使用maven的profile實現動態指定命令  Linux/mac下，請使用mvn install -P linux進行install-->
        <profile>
            <id>window</id>
            <properties>
                <npm>npm.cmd</npm>
            </properties>
           <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
        </profile>
        <profile>
            <id>linux</id>
            <properties>
                <npm>npm</npm>
            </properties>

        </profile>
    </profiles>
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.4.0</version>
                <executions>

                  <execution>
                    <id>exec-set-registry</id>
                    <phase>prepare-package</phase>
                    <goals>
                      <goal>exec</goal>
                    </goals>
                    <configuration>
                      <executable>${npm}</executable>
                        <arguments>
                          <argument>config</argument>
                          <argument>set</argument>
                          <argument>registry</argument>
                          <argument>https://registry.npm.taobao.org</argument>
                        </arguments>
                     </configuration>
                  </execution>

                    <execution>
                        <id>exec-npm-install</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>${npm}</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                            </configuration>
                    </execution>

                    <execution>
                        <id>exec-npm-run-build</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>${npm}</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                          </configuration>
                    </execution>

                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>Copy App Content</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.parent.basedir}/backend/src/main/resources/public</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <directory>target/dist</directory>
                                    <includes>
                                        <include>static/</include>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

這裡指定了淘寶的npm倉庫，install和run build以及拷包操作。

後臺介紹

和普通搭建Spring boot無異。

參考資料