Springboot項目與vue項目整合打包

個人環境
* JDK 1.8
* maven 3.6.0
* node環境

1.爲何須要先後端項目開發時分離，部署時合併？

在一些公司，部署實施人員的技術沒法和互聯網公司的運維團隊相比，因爲各類不定的環境也沒法作到自動構建，容器化部署等。所以在這種狀況下儘可能減小部署時的服務軟件需求，打出的包數量也儘可能少。針對這種狀況這裏採用的在開發中作到先後端獨立開發，打包時在後端springboot打包發佈時將前端的構建輸出一塊兒打入，最後只需部署springboot的項目便可，無需再安裝nginx服務器

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

1）前端開發好後將build構建好的dist下的文件拷貝到springboot的resources的static下（boot項目默認沒有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