SpringBoot和VUE源碼直接整合打包成jar的踩坑記錄
一、前言
spring boot是要打成jar包運行的，項目采用了前（VUE）后（SpringBoot）端完全分離，開發(fā)完成后需要整合到一起發(fā)布，這就要引出這篇博客的由來了；一開始的時候是前端VUE開發(fā)完成后打成dist包然后發(fā)給我（前后端不在一起開發(fā)），我拿到dist包后解壓然后放到springboot的static目錄下。
然后將項目打成jar包。
最后部署，一次兩次沒問題，但是如果是聯(lián)調(diào)階段，前端改了東西就會很麻煩。
因為我們不在一起工作，團隊的git地址不是同的。
項目經(jīng)理提出：把這兩個一起打包，你研究一下，能到做吧？
這時我走向了樓頂，好的，博客結(jié)束，人生結(jié)束。。。。（搞笑一下）
程序員的字典里沒有不字！去網(wǎng)上搜，別說還真有這玩意（比人才疏學淺，工作沒多長時間，所以對我來說算是個難題）但是原博客里有坑啊，弄過來以后沒達到預期效果啊，這個坑就是我長進的地方了。
二、環(huán)境介紹
一個springBoot項目、maven、VUE前端源碼、本地需要安裝node環(huán)境、IDEA
三、踩坑
加個思路說明吧：通過maven打包jar包時，通過maven調(diào)用node命令先將VUE打包，然后將打包好的東西通過復制的方式到指定目錄；這個是網(wǎng)上其他博客的思路，我一開也是進行這種，后面進行了改進。
先踩別人踩過的腳印。
1）先介紹一下目錄結(jié)構
如下如
說明一下：springBoot的是目錄結(jié)構是java和resource，在main目錄下創(chuàng)建一個文件夾web（名字你自己定，但是下面配置maven的時候要對應上）；
擴展：在IDEA中開發(fā)vue，可以安裝UVE.js插件，這個安裝教程我就不寫了，網(wǎng)上有。
2）要介紹一下VUE打包流程
首先源碼是我要過來以后直接粘貼到的web文件夾下，但是沒有node_modules這個文件夾，因為這個文件夾一般很大（而且好像默認也會忽略這個文件夾），所以前端沒有粘給我。
這個時候就需要先install
拿到源碼后npm命令總結(jié)如下：npm install （安裝相關modules）
npm run build （打包）
如果是npm鏡像為淘寶的那個的話，npm和cnpm等效。
3）在項目中的pom文件中添加插件
pom文件如下圖：
先聲明：VUE源碼沒有node_module,所以是要第一步執(zhí)行的，第二部是buildVue，第三步是復制打包的東西到指定目錄。
這個順序很重要，就像人生一樣，凡事總要有個順序。。。扯遠了，之所以是因為強調(diào)順序，是因為我采的坑就是順序問題。
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讓我這個渣渣調(diào)了三個小時，最后將坑zhan于馬下。也不知道他們那些是真的一步打包成功了還是故意留坑。
6）關于標簽
這個是將插件的執(zhí)行綁定到maven執(zhí)行的時候生命周期。關于這個生命周期有一篇博客，我轉(zhuǎn)載了，列舉的很清楚。
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）項目目錄結(jié)構
如下：
說明：static是放置靜態(tài)資源的文件目錄（SpringBoot默認獲取靜態(tài)資源和頁面的設置可百度了解一下），web是自己創(chuàng)建的，名字可以改，之所以創(chuàng)建這個一個目錄是將前后端分離，如果目錄結(jié)構和我的這個不一樣的，修改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: '/',
// 修改結(jié)束
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下了，原理很簡單。
弄到別的路徑就修改一下上面的打包路徑。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
詳解如何在SpringBoot中實現(xiàn)優(yōu)雅關閉
這篇文章主要介紹了如何在SpringBoot中實現(xiàn)優(yōu)雅關閉,SpringBoot應用程序的關閉可以是崩潰,也可以是手動關閉的,Shutdown、Crash 和 Graceful 之間的區(qū)別在于,它控制決定了我們可以用這個事件做什么,本文中,一起研究下Spring Boot提供的開箱即用功能之一：優(yōu)雅關閉2024-09-09
這篇文章主要介紹了Spring中的aware接口詳情，Spring中有很多繼承于aware中的接口，這些接口到底是做什么用到的，下面我們就一起來看看吧，文章詳細內(nèi)容需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了java尋找迷宮路徑的簡單實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
IDEA將Maven項目中指定文件夾下的xml等文件編譯進classes的方法
這篇文章主要介紹了IDEA將Maven項目中指定文件夾下的xml等文件編譯進classes的方法，幫助大家更好的利用IDEA進行Java的開發(fā)學習，感興趣的朋友可以了解下2021-01-01
下面小編就為大家?guī)硪黄狫ava-文件File簡單實用方法(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
主要介紹了java的三種隨機數(shù)生成方式的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2021-07-07
Security6.4.2?自定義異常中統(tǒng)一響應遇到的問題
本文主要介紹了Security6.4.2?自定義異常中統(tǒng)一響應遇到的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-03-03
這篇文章主要介紹了spring單例如何改多例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
SpringBoot自定義注解API數(shù)據(jù)加密和簽名校驗
這篇文章主要介紹了SpringBoot自定義注解API數(shù)據(jù)加密和簽名校驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
一文詳解SpringBoot如何創(chuàng)建自定義的自動配置
在實際開發(fā)中,僅靠SpringBoot的自動配置是遠遠不夠的,所以這篇文章主要來和大家簡單講講如何在SpringBoot創(chuàng)建自定義的自動配置吧2025-07-07