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