如何把vuejs打包出來(lái)的文件整合到springboot里
這個(gè)需求不知道是不是合適，因?yàn)殪o態(tài)的vuejs項(xiàng)目，用nginx部署，聽(tīng)說(shuō)很快。
一般有這個(gè)需求的，都是用tomcat來(lái)部署java項(xiàng)目，tomcat轉(zhuǎn)發(fā)靜態(tài)vuejs，應(yīng)該不會(huì)很快。
好吧，以上都是聽(tīng)說(shuō)。。。應(yīng)該。。。實(shí)際嘛？。。。
廢話不多講，馬上搞起。
這里第一句要說(shuō)的是，目前這個(gè)方式我認(rèn)為只支持#這個(gè)方式的路由，如果改成了html5的mode: 'history'，應(yīng)該是不支持的。
開(kāi)始準(zhǔn)備：
注意，我的springboot用的視圖模板是thymeleaf，靜態(tài)文件夾路徑默認(rèn)是resources/static/，我們目的就是要把dist這個(gè)打包好的文件夾，整個(gè)放進(jìn)去這里。
1.修改vuejs的config/index.js,在里面找到assetsPublicPath，改為/dist/,記住，是build:{}這里的，不是上面dev:{}的。
2.執(zhí)行npm run build，會(huì)出現(xiàn)一個(gè)dist文件夾在vuejs項(xiàng)目目錄里。
3.把這個(gè)dist文件夾copy到springboot的resources/static/,記住，是整個(gè)dist連文件夾一起copy過(guò)來(lái)。
OK，搞掂。就是這么簡(jiǎn)單。
訪問(wèn)localhost/dist/index.html/#/就可以
PS:本人對(duì)webpack不熟悉，按理，只要修改上圖中的assetsRoot，可以直接build到最終路徑，不用手動(dòng)copy那么麻煩
總結(jié)
以上所述是小編給大家介紹的如何把vuejs打包出來(lái)的文件整合到springboot里，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式
這篇文章主要介紹了vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue 動(dòng)態(tài)組件用法示例小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)組件用法,結(jié)合實(shí)例形式總結(jié)分析了vue 動(dòng)態(tài)組件基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問(wèn)題
這篇文章主要介紹了ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁(yè)面的示例代碼(直播平臺(tái)源碼)
這篇文章主要介紹了vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁(yè)面,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vue中封裝input組件的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-10-10
本篇文章主要介紹了淺談vue.js中v-for循環(huán)渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07