如何把vuejs打包出來的文件整合到springboot里
這個(gè)需求不知道是不是合適，因?yàn)殪o態(tài)的vuejs項(xiàng)目，用nginx部署，聽說很快。
一般有這個(gè)需求的，都是用tomcat來部署java項(xiàng)目，tomcat轉(zhuǎn)發(fā)靜態(tài)vuejs，應(yīng)該不會(huì)很快。
好吧，以上都是聽說。。。應(yīng)該。。。實(shí)際嘛？。。。
廢話不多講，馬上搞起。
這里第一句要說的是，目前這個(gè)方式我認(rèn)為只支持#這個(gè)方式的路由，如果改成了html5的mode: 'history'，應(yīng)該是不支持的。
開始準(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過來。
OK，搞掂。就是這么簡(jiǎn)單。
訪問localhost/dist/index.html/#/就可以
PS:本人對(duì)webpack不熟悉，按理，只要修改上圖中的assetsRoot，可以直接build到最終路徑，不用手動(dòng)copy那么麻煩
總結(jié)
以上所述是小編給大家介紹的如何把vuejs打包出來的文件整合到springboot里，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue零基礎(chǔ)入門之模板語法與數(shù)據(jù)綁定及Object.defineProperty方法詳解
這篇文章主要介紹了Vue初學(xué)基礎(chǔ)中的模板語法、數(shù)據(jù)綁定、Object.defineProperty方法等基礎(chǔ)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue?element表格某一列內(nèi)容過多,超出省略號(hào)顯示的實(shí)現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號(hào)顯示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue項(xiàng)目中如何配置eslint和prettier
這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
使用proxytable 配置解決 vue-cli 的跨域請(qǐng)求問題【推薦】
這篇文章主要介紹了利用 proxytable 配置解決 vue-cli 的跨域請(qǐng)求問題,本文的目錄結(jié)構(gòu)基于 webpack 模板結(jié)構(gòu)，需要的朋友可以參考下2018-05-05
詳解Vue2.X的路由管理記錄之 鉤子函數(shù)（切割流水線）
本篇文章主要介紹了Vue2.X的路由管理記錄之 鉤子函數(shù)（切割流水線），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對(duì)比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對(duì)大家有所幫助2021-11-11
Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動(dòng)連線和點(diǎn)擊連線)
jsPlumb 是一個(gè)比較強(qiáng)大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實(shí)現(xiàn)連線效果，同時(shí)支持滑動(dòng)連線和點(diǎn)擊連線，感興趣的可以了解一下2023-01-01
如何使用VuePress搭建一個(gè)類型element ui文檔
這篇文章主要介紹了如何使用VuePress搭建一個(gè)類型element ui文檔，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過定義一個(gè)全局對(duì)象來存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫，需要的朋友可以參考下2023-11-11