SpringBoot和VUE源碼直接整合打包成jar的踩坑記錄
一、前言
spring boot是要打成jar包運行的，項目采用了前（VUE）后（SpringBoot）端完全分離，開發(fā)完成后需要整合到一起發(fā)布，這就要引出這篇博客的由來了；一開始的時候是前端VUE開發(fā)完成后打成dist包然后發(fā)給我（前后端不在一起開發(fā)），我拿到dist包后解壓然后放到springboot的static目錄下。
然后將項目打成jar包。
最后部署，一次兩次沒問題，但是如果是聯(lián)調階段，前端改了東西就會很麻煩。
因為我們不在一起工作，團隊的git地址不是同的。
項目經(jīng)理提出：把這兩個一起打包，你研究一下，能到做吧？
這時我走向了樓頂，好的，博客結束，人生結束。。。。（搞笑一下）
程序員的字典里沒有不字！去網(wǎng)上搜，別說還真有這玩意（比人才疏學淺，工作沒多長時間，所以對我來說算是個難題）但是原博客里有坑啊，弄過來以后沒達到預期效果啊，這個坑就是我長進的地方了。
二、環(huán)境介紹
一個springBoot項目、maven、VUE前端源碼、本地需要安裝node環(huán)境、IDEA
三、踩坑
加個思路說明吧：通過maven打包jar包時，通過maven調用node命令先將VUE打包，然后將打包好的東西通過復制的方式到指定目錄；這個是網(wǎng)上其他博客的思路，我一開也是進行這種，后面進行了改進。
先踩別人踩過的腳印。
1）先介紹一下目錄結構
如下如
說明一下：springBoot的是目錄結構是java和resource，在main目錄下創(chuàng)建一個文件夾web（名字你自己定，但是下面配置maven的時候要對應上）；
擴展：在IDEA中開發(fā)vue，可以安裝UVE.js插件，這個安裝教程我就不寫了，網(wǎng)上有。
2）要介紹一下VUE打包流程
首先源碼是我要過來以后直接粘貼到的web文件夾下，但是沒有node_modules這個文件夾，因為這個文件夾一般很大（而且好像默認也會忽略這個文件夾），所以前端沒有粘給我。
這個時候就需要先install
拿到源碼后npm命令總結如下：npm install （安裝相關modules）
npm run build （打包）
如果是npm鏡像為淘寶的那個的話，npm和cnpm等效。
3）在項目中的pom文件中添加插件
pom文件如下圖：
先聲明：VUE源碼沒有node_module,所以是要第一步執(zhí)行的，第二部是buildVue，第三步是復制打包的東西到指定目錄。
這個順序很重要，就像人生一樣，凡事總要有個順序。。。扯遠了，之所以是因為強調順序，是因為我采的坑就是順序問題。
pom文件來了，如下圖：
<build>
<plugins>
<!--SpringBoot和VUE整合打包-->
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<!--1、maven執(zhí)行node的install命令-->
<execution>
<id>exec-cnpm-install</id>
<!--這個階段很重要，不能亂寫，install必須要為第一階段-->
<phase>initialize</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>cnpm</executable>
<arguments>
<argument>install</argument>
</arguments>
<!--執(zhí)行install命令的目錄-->
<workingDirectory>${basedir}/src/main/web</workingDirectory>
</configuration>
</execution>
<!--2、install完成后build-->
<execution>
<id>exec-cnpm-run-build</id>
<!--階段一定要在復制之前，且在打包和復制都在編譯之前-->
<phase>initialize</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>cnpm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
<workingDirectory>${basedir}/src/main/web</workingDirectory>
<addOutputToClasspath>true</addOutputToClasspath>
</configuration>
</execution>
</executions>
</plugin>
<!--3、復制打包好的文件到指定目錄-->
<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>
<phase>initialize</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/web/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
說明：這個地方需要說一下maven的打包的階段，然后配合上上面說明的順序才能一步打包成jar。
4）擴展—maven的默認生命周期
以下是按照先后順序排列的。
default生命周期是最核心的，它包含了構建項目時真正需要執(zhí)行的所有步驟。
validate initialize generate-sources process-sources generate-resources process-resources：復制和處理資源文件到target目錄，準備打包； compile：編譯項目的源代碼； process-classes generate-test-sources process-test-sources generate-test-resources process-test-resources test-compile：編譯測試源代碼； process-test-classes test：運行測試代碼； prepare-package package：打包成jar或者war或者其他格式的分發(fā)包； pre-integration-test integration-test post-integration-test verify install：將打好的包安裝到本地倉庫，供其他項目使用； deploy：將打好的包安裝到遠程倉庫，供其他項目使用；
5）坑在哪？
坑就在網(wǎng)上的博客只是在階段上粘貼了一段如：
代碼下
<execution>
<id>copy-spring-boot-webapp</id>
<!-- here the phase you need -->
<phase>initialize</phase>
<goals>
<goal>copy-resources</goal>
</goals>
像我這種經(jīng)過這種坑才知道m(xù)aven生命周期的人是注定要踩進去的。踩的坑多了，世界便沒有了坑。。。
像這個initialize 這里填入的參考上面貼出的maven默認生命周期，因為打包是將target下的東西最后壓縮成jat ，也就是編譯后的東西，所以我們的install，build和復制操作都應該在compile階段之前。所以選擇在了
第一階段initialize。當初網(wǎng)上博客寫的基本上全都是prepare-package階段，這tm讓我這個渣渣調了三個小時，最后將坑zhan于馬下。也不知道他們那些是真的一步打包成功了還是故意留坑。
6）關于標簽
這個是將插件的執(zhí)行綁定到maven執(zhí)行的時候生命周期。關于這個生命周期有一篇博客，我轉載了，列舉的很清楚。
7）雖然解決了坑
但是解決完思考一下，步驟其實可以是可以簡化的，就比如那個復制過程。以及install過程。下個標題介紹簡化。
8）如果你在maven里配置install、build和copy第一次的時間會很長
而且還不一定會成功?？梢愿鶕?jù)需要將階段優(yōu)化。主要是因為maven執(zhí)行node命令的時候，node那個命令很慢。
四、簡化
1）install這個建議最好在maven配置中去掉
時間慢是一部分原因，另一部分原因就是，如果你以后要重新打jar的話，還是會執(zhí)行install，這個install只需要一次就夠了，所以建議這個install不要加。
在將源碼復制的時候要一份node_modlues或者自己學著在cmd里先執(zhí)行完install命令。
如果node環(huán)境沒問題，因為這個只需要成功執(zhí)行一次就夠了。
另一種情況就是如果項目一開始在搭建的時候，vue和springboot都在一個目錄下的話，也就是初始化vue的時候你肯定執(zhí)行過install命令。
另外說明一點就是如果Vue前端開發(fā)中添加了新的modules，你就需要執(zhí)行install命令，(而且版本控制的時候沒有提交這個新的modules),作為一個java開發(fā)工程師在cmd里執(zhí)行一下子還是行的吧，畢竟你想一起打包的話，也要安裝node環(huán)境，只需要在vue目錄下執(zhí)行 npm install 就可以了，沒什么難度。
2）build是必須要的
如果我們把build好的包直接build到指定目錄，這樣是不是就不在需要copy這個插件，對吧，所以我的簡化思路就是直接build到指定目錄好了。
五、簡化過程
1）思路
先在cmd中執(zhí)行install（因為install不是主要的，只有在vue中添加了新的Modules和初始化時才需要），所以去掉這個plugin；
主要就是執(zhí)行run build，所以將復制那一步也省略掉。
2）修改pom文件中的配置
修改后如下（其實就是將install和copy去掉了）：
<build>
<plugins>
<!--SpringBoot和VUE整合打包-->
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<!--2、install完成后build-->
<execution>
<id>exec-cnpm-run-build</id>
<phase>initialize</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>cnpm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
<workingDirectory>${basedir}/src/main/web</workingDirectory>
<addOutputToClasspath>true</addOutputToClasspath>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
說明：${basedir}/src/main/web是放置整個VUE源碼的地方，當去掉復制這一個plugin以后，就需要在VUE源碼里進行修改，也就是設置build的時候直接放到springBoot的static下。
3）項目目錄結構
如下：
說明：static是放置靜態(tài)資源的文件目錄（SpringBoot默認獲取靜態(tài)資源和頁面的設置可百度了解一下），web是自己創(chuàng)建的，名字可以改，之所以創(chuàng)建這個一個目錄是將前后端分離，如果目錄結構和我的這個不一樣的，修改Vue的打包配置時需要對應上。
4）修改Vue中的打包配置
先了解一下文件的相對路徑知識，web和static是同級目錄。
對Vue的修改是上圖目錄中的web/config目錄下的index.js，修改后代碼如下：
'use strict'
documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost', // can be overwritten by process.env.HOST
port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: false,
poll: false,
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-source-map',
cssSourceMap: false
},
// 整合打包主要是修改這個build
build: {
// Template for index.html
// index為Vue的打包后的入口
index: path.resolve(__dirname, '../../resources/static/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../resources/static'),
assetsSubDirectory: '',
assetsPublicPath: '/',
// 修改結束
productionSourceMap: false,
devtool: 'source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report || false,
generateAnalyzerReport: process.env.npm_config_generate_report || false
}
}
5）這樣就可以
將打包好的Vue的東西直接放到static下了，原理很簡單。
弄到別的路徑就修改一下上面的打包路徑。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了Mybatis攔截器實現(xiàn)自定義需求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Java程序流程控制：判斷結構、選擇結構、循環(huán)結構原理與用法實例分析
這篇文章主要介紹了Java程序流程控制：判斷結構、選擇結構、循環(huán)結構原理與用法,結合實例形式分析了Java流程控制中判斷結構、選擇結構、循環(huán)結構相關原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了基于Spring的RPC通訊模型的使用與比較，詳細的介紹了RMI、Caucho的Hessian和Burlap以及Spring自帶的HTTP invoker，感興趣的可以了解一下2018-09-09
前三篇文章已經(jīng)介紹過Springboot項目如何實現(xiàn)Aop，攔截器和過濾齊功能，這篇文章主要介紹三者的橫向對比，本文有一定的參考價值，感興趣的小伙伴可以參考閱讀2023-03-03
這篇文章主要為大家詳細介紹了java實現(xiàn)中英文混合字符的截取方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
適配器模式（Adapter），是Java23種設計模式中的結構型模式之一，它可以將新的功能和原先的功能連接起來，使由于需求變動導致不能用的功能，重新利用起來，本文將詳細聊一聊Java適配器的運用場景和使用方法，感興趣的同學可以跟著小編一起來學習2023-05-05
大家好，本篇文章主要講的是Java中的方法內聯(lián)介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下2022-01-01
使用java將動態(tài)網(wǎng)頁生成靜態(tài)網(wǎng)頁示例
這篇文章主要介紹了使用java將動態(tài)網(wǎng)頁生成靜態(tài)網(wǎng)頁示例,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了關于Hadoop的HDFS集群,Hadoop 如何配置集群、不同的計算機里又應該有怎樣的配置，這些問題是在學習中產(chǎn)生的。本章的配置中將會提供一個典型的示例,需要的朋友可以參考下2023-05-05
本文給大家使用java代碼實現(xiàn)用戶登錄驗證功能，當用戶輸入三次錯誤后，用戶不可以再次登錄的。具體實現(xiàn)代碼，大家可以參考下本教程2016-08-08