SpringBoot+Vue 前后端合并部署的配置方法

更新時(shí)間：2020年12月30日 14:48:57 作者：可樂要加冰

這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前后端分離開發(fā)項(xiàng)目

前端vue項(xiàng)目

服務(wù)端springboot項(xiàng)目

如何將vue的靜態(tài)資源整合到springboot項(xiàng)目里，通過(guò)啟動(dòng)jar包的方式部署服務(wù)。

前端項(xiàng)目執(zhí)行npm run build命令進(jìn)行打包，會(huì)自動(dòng)生成打包后的dist目錄文件所有東西放置在Resources/static文件下，如下圖

此處index.html文件的資源路徑(需要在前端打包配置中進(jìn)行配置)應(yīng)該如下圖：

對(duì)應(yīng)的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路由的路徑無(wú)法正常解析

將vue-router中的路徑加上統(tǒng)一的前綴“/vueXX”(自定義)，然后在springboot項(xiàng)目中自定義過(guò)濾器，攔截帶“/vueXX”的路徑，將請(qǐng)求轉(zhuǎn)發(fā)到“/index.html”（將vue的路由資源交給路由處理）。

啟動(dòng)類中需添加：

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);
    };
  }
}

如果在項(xiàng)目中配置了過(guò)濾器：需要在過(guò)濾器中去除對(duì)應(yīng)的資源文件后綴的過(guò)濾條件。

配置至此，啟動(dòng)項(xiàng)目應(yīng)該是可以訪問到頁(yè)面?？梢栽跒g覽器打開調(diào)試工具，查看NetWork下的請(qǐng)求地址是否成功再進(jìn)行排查。

到此這篇關(guān)于SpringBoot+Vue 前后端合并部署的文章就介紹到這了,更多相關(guān)SpringBoot+Vue 合并部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue頂部菜單欄實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了vue頂部菜單欄實(shí)現(xiàn)小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
詳解vue2.0模擬后臺(tái)json數(shù)據(jù)
這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue使用Composition?API生成計(jì)算屬性computed
這篇文章主要為大家詳細(xì)介紹了Vue如何使用Composition?API實(shí)現(xiàn)生成計(jì)算屬性computed，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-06-06
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
vue動(dòng)態(tài)路由匹配和路由懶加載多種方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由匹配和路由懶加載,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue非單文件組件使用詳解
Vue單文件組件通常使用.vue文件擴(kuò)展名,下面這篇文章主要給大家介紹了關(guān)于Vue非單文件組件使用的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
前端報(bào)錯(cuò)npm ERR! cb() never called!問題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下
2024-05-05
Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html，js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能，感興趣的朋友一起看看吧
2017-10-10