SpringBoot+Vue 前后端合并部署的配置方法
前后端分離開發(fā)項目
前端vue項目
服務端springboot項目
如何將vue的靜態(tài)資源整合到springboot項目里，通過啟動jar包的方式部署服務。
前端項目執(zhí)行npm run build命令進行打包，會自動生成打包后的dist目錄文件所有東西放置在Resources/static文件下，如下圖
此處index.html文件的資源路徑(需要在前端打包配置中進行配置)應該如下圖：
對應的springboot:application.yml需添加：
server:
port: 8080
tomcat:
uri-encoding: UTF-8
spring:
application:
name: "xxxx"
servlet:
application-display-name: myProject
mvc:
static-path-pattern: /static/**
為了解決vue-router路由的路徑無法正常解析
將vue-router中的路徑加上統(tǒng)一的前綴“/vueXX”(自定義)，然后在springboot項目中自定義過濾器，攔截帶“/vueXX”的路徑，將請求轉發(fā)到“/index.html”（將vue的路由資源交給路由處理）。
啟動類中需添加：
public class MyProJect {
public static void main(String[] args) {
SpringApplication.run(MyProJect.class,args);
}
@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
return factory -> {
ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/static/index.html");
factory.addErrorPages(error404Page);
};
}
}
如果在項目中配置了過濾器：需要在過濾器中去除對應的資源文件后綴的過濾條件。
配置至此，啟動項目應該是可以訪問到頁面?？梢栽跒g覽器打開調(diào)試工具，查看NetWork下的請求地址是否成功再進行排查。
到此這篇關于SpringBoot+Vue 前后端合并部署的文章就介紹到這了,更多相關SpringBoot+Vue 合并部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue2.0模擬后臺json數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vue使用Composition?API生成計算屬性computed
這篇文章主要為大家詳細介紹了Vue如何使用Composition?API實現(xiàn)生成計算屬性computed，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-06-06
Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue動態(tài)路由匹配和路由懶加載,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue單文件組件通常使用.vue文件擴展名,下面這篇文章主要給大家介紹了關于Vue非單文件組件使用的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
前端報錯npm ERR! cb() never called!問題解決辦法
最近接手了一個前臺項目,執(zhí)行npm install的時候一直報錯,所以這里就給大家總結下,這篇文章主要給給大家介紹了關于前端報錯npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue 實現(xiàn)手動刷新組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue Element-ui input 遠程搜索與修改建議顯示模版的示例代碼
本文分為html，js和css代碼給大家詳細介紹了vue Element-ui input 遠程搜索與修改建議顯示模版功能，感興趣的朋友一起看看吧2017-10-10