vue前端代碼如何通過maven打成jar包運(yùn)行
vue前端代碼生成jar包執(zhí)行
業(yè)務(wù)開發(fā)需求，需要將vue前端代碼通過jar包啟動(dòng)。
當(dāng)前項(xiàng)目是springcloud微服務(wù)模式，創(chuàng)建了一個(gè)新的module做得。
個(gè)人認(rèn)為springboot下也可以操作。
結(jié)果：打成的jar包內(nèi)包含vue前端代碼，通過java -jar命令直接啟動(dòng)，即可訪問前端頁面。
1.新建module項(xiàng)目
項(xiàng)目工程結(jié)構(gòu)如下：
一定要配置WebApplication作為入口類，前端dist包打成jar包后是沒有啟動(dòng)入口類的，所以一定要有啟動(dòng)類。
2.pom.xml
// 有web就可以了
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
// 個(gè)人使用的maven打包插件
<build>
<finalName>zsddweb</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<configuration>
<skipTests>true</skipTests>
</configuration>
</plugin>
</plugins>
</build>
3.application.yml文件
server: port: 8005 spring: application: name: zsddweb
4.vue生成的dist包
?。ue的生產(chǎn)環(huán)境一定要配置自己本地的ip和后端的服務(wù)端口
vue正常打dist包即可。
5.生成jar包
將vue項(xiàng)目打包后的dist文件夾中的放到resource的static中
將web直接install打包，生成的jar包通過 java -jar ** 啟動(dòng)
6.訪問index.html
localhost:配置的端口/index.html
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3封裝一個(gè)帶動(dòng)畫的關(guān)閉按鈕示例詳解
這篇文章主要為大家介紹了vue3封裝一個(gè)帶動(dòng)畫的關(guān)閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue數(shù)據(jù)push后不能響應(yīng)式更新的問題
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應(yīng)式更新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04
在vue中使用el-tab-pane v-show/v-if無效的解決
這篇文章主要介紹了在vue中使用el-tab-pane v-show/v-if無效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目中常見的三種文件類型在線預(yù)覽實(shí)現(xiàn)(pdf/word/excel表格)
最近在項(xiàng)目中要做一個(gè)pdf在線預(yù)覽的功能,索性給大家整理個(gè)全面的,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常見的三種文件類型在線預(yù)覽實(shí)現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05
在本篇文章里小編給大家整理的是關(guān)于VUE 項(xiàng)目初建和常見問題以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-09-09