我的環境
* JDK 1.8
* maven 3.6.0
* node環境

1.為什麼需要前後端專案開發時分離，部署時合併？

在一些公司，部署實施人員的技術無法和網際網路公司的運維團隊相比，由於各種不定的環境也無法做到自動構建，容器化部署等。因此在這種情況下儘量減少部署時的服務軟體需求，打出的包數量也儘量少。針對這種情況這裡採用的在開發中做到前後端獨立開發，打包時在後端springboot打包釋出時將前端的構建輸出一起打入，最後只需部署springboot的專案即可，無需再安裝nginx伺服器

在這裡我有兩種方式，一種是簡單的，一種是複雜的，下邊先來看一個簡單的例子：

1）前端開發好後將build構建好的dist下static中的檔案拷貝到springboot的resources的static下，index.html則直接拷貝到springboot的resource的static下

操作步驟：前端vue專案使用命令 npm run build 或者 cnpm run build 打包生成dist檔案，在springboot專案中resources下建立static資料夾，將dist檔案中的資料夾複製到static中，然後去application中跑起來boot專案，這樣直接訪問index.html就可以訪問到頁面（api介面請求地址自己根據情況打包時配置或者在生成的dist檔案中config資料夾中的index.js中配置）

專案結構如圖：

滑鼠選中的這幾個就是從dist檔案中複製過來的前端的包，然後我們直接啟動boot專案就可以通過index.html訪問了（ps：上面這是最簡單的合併方式，但是如果作為工程級的專案開發，並不推薦使用手工合併，也不推薦將前端程式碼構建後提交到springboot的resouce下，好的方式應該是保持前後端完全獨立開發程式碼，專案程式碼互不影響，藉助jenkins這樣的構建工具在構建springboot時觸發前端構建並編寫自動化指令碼將前端webpack構建好的資源拷貝到springboot下再進行jar的打包，最後就得到了一個完全包含前後端的springboot專案了。不過上述方法操作簡單，便於使用，如果想一次性打包完成的話，就看第二種）

2：第二種方法是在src/main下建立一個webapp資料夾，然後將前端專案的原始檔複製到該資料夾下，具體結構如圖：

然後使用maven命令執行本地node打包命令,這樣就可以 在執行mvn clean package命令時，利用maven外掛執行cnpm run build命令(我是使用的淘寶的映象cnpm,國外的npm命令會相對慢一些，大家根據自己的條件選擇，具體命令請看專案中前端vue檔案的README.md)，一次性完成整個過程

實現方法是這樣的，我們要引入org.codehaus.mojo外掛來進行maven呼叫node命令，pom.xml中為：

<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>exec-maven-plugin</artifactId>
				<executions>

					<execution>
						<id>exec-cnpm-install</id>
						<phase>prepare-package</phase>
						<goals>
							<goal>exec</goal>
						</goals>
						<configuration>
							<executable>${cnpm}</executable>
							<arguments>
								<argument>install</argument>
							</arguments>
							<workingDirectory>${basedir}/src/main/webapp</workingDirectory>
						</configuration>
					</execution>

					<execution>
						<id>exec-cnpm-run-build</id>
						<phase>prepare-package</phase>
						<goals>
							<goal>exec</goal>
						</goals>
						<configuration>
							<executable>${cnpm}</executable>
							<arguments>
								<argument>run</argument>
								<argument>build</argument>
							</arguments>
							<workingDirectory>${basedir}/src/main/webapp</workingDirectory>
						</configuration>
					</execution>

				</executions>
			</plugin>

然後maven-resources-plugin外掛將專案的前端檔案打包到boot專案的classes中，具體的請參考pom.xml中的，

 將webapp/dist資料夾中的檔案複製到src/main/resources/static中，並打包到classes

<!--copy檔案到指定目錄下 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-resources-plugin</artifactId>
				<configuration>
					<encoding>${project.build.sourceEncoding}</encoding>
				</configuration>
				<executions>
					<execution>
						<id>copy-spring-boot-webapp</id>
						<!-- here the phase you need -->
						<phase>validate</phase>
						<goals>
							<goal>copy-resources</goal>
						</goals>
						<configuration>
							<encoding>utf-8</encoding>
							<outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
							<resources>
								<resource>
									<directory>${basedir}/src/main/webapp/dist</directory>
								</resource>
							</resources>
						</configuration>
					</execution>
				</executions>
			</plugin>

然後通過maven命令：

mvn clean package -P window　

打包成功後我們的前端專案就整個的打包到了boot專案的jar包中，然後啟動專案，訪問index.html頁面就看到了專案啟動成功。

打出來的jar包中如果static說明打包由於種種原因失敗了，我就遇到過幾次，這時候需要再來一次 mvn clean package -P window