SpringBoot和VUE源碼直接整合打包成jar的踩坑記錄
一、前言
spring boot是要打成jar包運(yùn)行的，項(xiàng)目采用了前（VUE）后（SpringBoot）端完全分離，開(kāi)發(fā)完成后需要整合到一起發(fā)布，這就要引出這篇博客的由來(lái)了；一開(kāi)始的時(shí)候是前端VUE開(kāi)發(fā)完成后打成dist包然后發(fā)給我（前后端不在一起開(kāi)發(fā)），我拿到dist包后解壓然后放到springboot的static目錄下。
然后將項(xiàng)目打成jar包。
最后部署，一次兩次沒(méi)問(wèn)題，但是如果是聯(lián)調(diào)階段，前端改了東西就會(huì)很麻煩。
因?yàn)槲覀儾辉谝黄鸸ぷ?，團(tuán)隊(duì)的git地址不是同的。
項(xiàng)目經(jīng)理提出：把這兩個(gè)一起打包，你研究一下，能到做吧？
這時(shí)我走向了樓頂，好的，博客結(jié)束，人生結(jié)束。。。。（搞笑一下）
程序員的字典里沒(méi)有不字！去網(wǎng)上搜，別說(shuō)還真有這玩意（比人才疏學(xué)淺，工作沒(méi)多長(zhǎng)時(shí)間，所以對(duì)我來(lái)說(shuō)算是個(gè)難題）但是原博客里有坑啊，弄過(guò)來(lái)以后沒(méi)達(dá)到預(yù)期效果啊，這個(gè)坑就是我長(zhǎng)進(jìn)的地方了。
二、環(huán)境介紹
一個(gè)springBoot項(xiàng)目、maven、VUE前端源碼、本地需要安裝node環(huán)境、IDEA
三、踩坑
加個(gè)思路說(shuō)明吧：通過(guò)maven打包jar包時(shí)，通過(guò)maven調(diào)用node命令先將VUE打包，然后將打包好的東西通過(guò)復(fù)制的方式到指定目錄；這個(gè)是網(wǎng)上其他博客的思路，我一開(kāi)也是進(jìn)行這種，后面進(jìn)行了改進(jìn)。
先踩別人踩過(guò)的腳印。
1）先介紹一下目錄結(jié)構(gòu)
如下如
說(shuō)明一下：springBoot的是目錄結(jié)構(gòu)是java和resource，在main目錄下創(chuàng)建一個(gè)文件夾web（名字你自己定，但是下面配置maven的時(shí)候要對(duì)應(yīng)上）；
擴(kuò)展：在IDEA中開(kāi)發(fā)vue，可以安裝UVE.js插件，這個(gè)安裝教程我就不寫了，網(wǎng)上有。
2）要介紹一下VUE打包流程
首先源碼是我要過(guò)來(lái)以后直接粘貼到的web文件夾下，但是沒(méi)有node_modules這個(gè)文件夾，因?yàn)檫@個(gè)文件夾一般很大（而且好像默認(rèn)也會(huì)忽略這個(gè)文件夾），所以前端沒(méi)有粘給我。
這個(gè)時(shí)候就需要先install
拿到源碼后npm命令總結(jié)如下：npm install （安裝相關(guān)modules）
npm run build （打包）
如果是npm鏡像為淘寶的那個(gè)的話，npm和cnpm等效。
3）在項(xiàng)目中的pom文件中添加插件
pom文件如下圖：
先聲明：VUE源碼沒(méi)有node_module,所以是要第一步執(zhí)行的，第二部是buildVue，第三步是復(fù)制打包的東西到指定目錄。
這個(gè)順序很重要，就像人生一樣，凡事總要有個(gè)順序。。。扯遠(yuǎn)了，之所以是因?yàn)閺?qiáng)調(diào)順序，是因?yàn)槲也傻目泳褪琼樞騿?wèn)題。
pom文件來(lái)了，如下圖：
<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>
<!--這個(gè)階段很重要，不能亂寫，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>
<!--階段一定要在復(fù)制之前，且在打包和復(fù)制都在編譯之前-->
<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、復(fù)制打包好的文件到指定目錄-->
<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>
說(shuō)明：這個(gè)地方需要說(shuō)一下maven的打包的階段，然后配合上上面說(shuō)明的順序才能一步打包成jar。
4）擴(kuò)展—maven的默認(rèn)生命周期
以下是按照先后順序排列的。
default生命周期是最核心的，它包含了構(gòu)建項(xiàng)目時(shí)真正需要執(zhí)行的所有步驟。
validate initialize generate-sources process-sources generate-resources process-resources：復(fù)制和處理資源文件到target目錄，準(zhǔn)備打包； compile：編譯項(xiàng)目的源代碼； process-classes generate-test-sources process-test-sources generate-test-resources process-test-resources test-compile：編譯測(cè)試源代碼； process-test-classes test：運(yùn)行測(cè)試代碼； prepare-package package：打包成jar或者war或者其他格式的分發(fā)包； pre-integration-test integration-test post-integration-test verify install：將打好的包安裝到本地倉(cāng)庫(kù)，供其他項(xiàng)目使用； deploy：將打好的包安裝到遠(yuǎn)程倉(cāng)庫(kù)，供其他項(xiàng)目使用；
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)過(guò)這種坑才知道m(xù)aven生命周期的人是注定要踩進(jìn)去的。踩的坑多了，世界便沒(méi)有了坑。。。
像這個(gè)initialize 這里填入的參考上面貼出的maven默認(rèn)生命周期，因?yàn)榇虬菍arget下的東西最后壓縮成jat ，也就是編譯后的東西，所以我們的install，build和復(fù)制操作都應(yīng)該在compile階段之前。所以選擇在了
第一階段initialize。當(dāng)初網(wǎng)上博客寫的基本上全都是prepare-package階段，這tm讓我這個(gè)渣渣調(diào)了三個(gè)小時(shí)，最后將坑zhan于馬下。也不知道他們那些是真的一步打包成功了還是故意留坑。
6）關(guān)于標(biāo)簽
這個(gè)是將插件的執(zhí)行綁定到maven執(zhí)行的時(shí)候生命周期。關(guān)于這個(gè)生命周期有一篇博客，我轉(zhuǎn)載了，列舉的很清楚。
7）雖然解決了坑
但是解決完思考一下，步驟其實(shí)可以是可以簡(jiǎn)化的，就比如那個(gè)復(fù)制過(guò)程。以及install過(guò)程。下個(gè)標(biāo)題介紹簡(jiǎn)化。
8）如果你在maven里配置install、build和copy第一次的時(shí)間會(huì)很長(zhǎng)
而且還不一定會(huì)成功?？梢愿鶕?jù)需要將階段優(yōu)化。主要是因?yàn)閙aven執(zhí)行node命令的時(shí)候，node那個(gè)命令很慢。
四、簡(jiǎn)化
1）install這個(gè)建議最好在maven配置中去掉
時(shí)間慢是一部分原因，另一部分原因就是，如果你以后要重新打jar的話，還是會(huì)執(zhí)行install，這個(gè)install只需要一次就夠了，所以建議這個(gè)install不要加。
在將源碼復(fù)制的時(shí)候要一份node_modlues或者自己學(xué)著在cmd里先執(zhí)行完install命令。
如果node環(huán)境沒(méi)問(wèn)題，因?yàn)檫@個(gè)只需要成功執(zhí)行一次就夠了。
另一種情況就是如果項(xiàng)目一開(kāi)始在搭建的時(shí)候，vue和springboot都在一個(gè)目錄下的話，也就是初始化vue的時(shí)候你肯定執(zhí)行過(guò)install命令。
另外說(shuō)明一點(diǎn)就是如果Vue前端開(kāi)發(fā)中添加了新的modules，你就需要執(zhí)行install命令，(而且版本控制的時(shí)候沒(méi)有提交這個(gè)新的modules),作為一個(gè)java開(kāi)發(fā)工程師在cmd里執(zhí)行一下子還是行的吧，畢竟你想一起打包的話，也要安裝node環(huán)境，只需要在vue目錄下執(zhí)行 npm install 就可以了，沒(méi)什么難度。
2）build是必須要的
如果我們把build好的包直接build到指定目錄，這樣是不是就不在需要copy這個(gè)插件，對(duì)吧，所以我的簡(jiǎn)化思路就是直接build到指定目錄好了。
五、簡(jiǎn)化過(guò)程
1）思路
先在cmd中執(zhí)行install（因?yàn)閕nstall不是主要的，只有在vue中添加了新的Modules和初始化時(shí)才需要），所以去掉這個(gè)plugin；
主要就是執(zhí)行run build，所以將復(fù)制那一步也省略掉。
2）修改pom文件中的配置
修改后如下（其實(shí)就是將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>
說(shuō)明：${basedir}/src/main/web是放置整個(gè)VUE源碼的地方，當(dāng)去掉復(fù)制這一個(gè)plugin以后，就需要在VUE源碼里進(jìn)行修改，也就是設(shè)置build的時(shí)候直接放到springBoot的static下。
3）項(xiàng)目目錄結(jié)構(gòu)
如下：
說(shuō)明：static是放置靜態(tài)資源的文件目錄（SpringBoot默認(rèn)獲取靜態(tài)資源和頁(yè)面的設(shè)置可百度了解一下），web是自己創(chuàng)建的，名字可以改，之所以創(chuàng)建這個(gè)一個(gè)目錄是將前后端分離，如果目錄結(jié)構(gòu)和我的這個(gè)不一樣的，修改Vue的打包配置時(shí)需要對(duì)應(yīng)上。
4）修改Vue中的打包配置
先了解一下文件的相對(duì)路徑知識(shí)，web和static是同級(jí)目錄。
對(duì)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
},
// 整合打包主要是修改這個(gè)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ǎn)單。
弄到別的路徑就修改一下上面的打包路徑。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Mybatis攔截器實(shí)現(xiàn)自定義需求，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Java程序流程控制：判斷結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)原理與用法實(shí)例分析
這篇文章主要介紹了Java程序流程控制：判斷結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)原理與用法,結(jié)合實(shí)例形式分析了Java流程控制中判斷結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了基于Spring的RPC通訊模型的使用與比較，詳細(xì)的介紹了RMI、Caucho的Hessian和Burlap以及Spring自帶的HTTP invoker，感興趣的可以了解一下2018-09-09
使用java將動(dòng)態(tài)網(wǎng)頁(yè)生成靜態(tài)網(wǎng)頁(yè)示例
