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)文章
Vue中路由參數(shù)與查詢參數(shù)傳遞對(duì)比解析
在Vue.js中,路由與導(dǎo)航不僅涉及頁面切換,還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù),這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明
這篇文章主要介紹了vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
this.$set()和Vue.set()本質(zhì)方法一樣,前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng),需要的朋友可以參考下2018-08-08解決Vue2?axios發(fā)請(qǐng)求報(bào)400錯(cuò)誤"Error:?Request?failed?with?s
這篇文章主要給大家介紹了關(guān)于如何解決Vue2?axios發(fā)請(qǐng)求報(bào)400錯(cuò)誤"Error:?Request?failed?with?status?code?400"的相關(guān)資料,在Vue應(yīng)用程序中我們通常會(huì)使用axios作為網(wǎng)絡(luò)請(qǐng)求庫,需要的朋友可以參考下2023-07-07vue 不使用select實(shí)現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實(shí)現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用,需要的朋友可以參考下2018-05-05vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決
這篇文章主要介紹了vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05