vue前端代碼如何通過maven打成jar包運行
更新時間：2024年01月02日 09:42:52 作者：洋哥登陸
這篇文章主要介紹了vue前端代碼如何通過maven打成jar包運行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue前端代碼生成jar包執(zhí)行
業(yè)務(wù)開發(fā)需求，需要將vue前端代碼通過jar包啟動。
當前項目是springcloud微服務(wù)模式，創(chuàng)建了一個新的module做得。
個人認為springboot下也可以操作。
結(jié)果：打成的jar包內(nèi)包含vue前端代碼，通過java -jar命令直接啟動，即可訪問前端頁面。
1.新建module項目
項目工程結(jié)構(gòu)如下：
一定要配置WebApplication作為入口類，前端dist包打成jar包后是沒有啟動入口類的，所以一定要有啟動類。
2.pom.xml
// 有web就可以了
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
// 個人使用的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包
！！vue的生產(chǎn)環(huán)境一定要配置自己本地的ip和后端的服務(wù)端口
vue正常打dist包即可。
5.生成jar包
將vue項目打包后的dist文件夾中的放到resource的static中
將web直接install打包，生成的jar包通過 java -jar ** 啟動
6.訪問index.html
localhost:配置的端口/index.html
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue.js中，路由與導航不僅涉及頁面切換，還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明
這篇文章主要介紹了vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue-CLI項目中路由傳參的方式詳解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項,需要的朋友可以參考下2018-08-08
解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?s
這篇文章主要給大家介紹了關(guān)于如何解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?status?code?400"的相關(guān)資料,在Vue應(yīng)用程序中我們通常會使用axios作為網(wǎng)絡(luò)請求庫,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了淺談一下Vue技術(shù)棧之生命周期,每一個vue實例從創(chuàng)建到銷毀的過程，就是這個vue實例的生命周期,這些過程中會伴隨著一些函數(shù)的自調(diào)用,需要的朋友可以參考下2023-05-05
vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue中使用vant的Toast輕提示報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05