vue打包發布在spingboot項目中 vue-router路由的處理


(原)

以下例子springboot后端地址為:localhost:7080/pingandai

vue前端地址為:locahost:8080/pingandai/

1、如果路由模式設置的是history。

那么最好帶上base,(base是根目錄的地址,比如你在頁面上訪問localhost:8080/b,那么它會自動跳轉到localhost:8080/pingandai/b路徑上)

 

打包完成后(打包過程這里不再描述,npm run build,網上很多例子),如果將dist下的文件都拷貝到springboot中resources/static目錄下(比如后台的地址為localhost:7080/pingandai),此時你在URL上輸入localhsot:7080/pingandai/b,你是找不到頁面的,原因是它在controller中找地址,發現沒有,直接就跳到錯誤頁面了,由於前端打包后只有一個index.html頁面,所以我們把請求錯誤重定向到index.html就可以了。
路由官網的描述在這里:
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

我們在spring中怎么配呢?
在springboot2.0以下和springboot2.0以上的配置不一樣,有些公司用的springboot2.0+的版本,但是網上給的全是

這種代碼,springboot2.0以上的版本已經把EmbeddedServletContainerCustomizer給移除了,所以根本找不到,先看下官網在二個版本中不同的寫法。
https://docs.spring.io/spring-boot/docs/1.5.21.BUILD-SNAPSHOT/reference/htmlsingle/#boot-features-programmatic-embedded-container-customization
https://docs.spring.io/spring-boot/docs/2.0.9.RELEASE/reference/htmlsingle/#boot-features-programmatic-embedded-container-customization
1.5.21版本代碼如下:

2.0.9版本代碼如下:

這里的nofount.html就是index.html頁面:

這樣,通過http://localhost:7080/pingandai/b就可以正常訪問到頁面了。
注意:如果前端的路由設置的是二級或以上的話,頁面是訪問不了的,就像這樣:

前端訪問地址為:http://localhost:7080/pingandai/a/b,控制台會報錯:

原因是vue是一個單頁面應用,打包后的文件index.html引用js和css的路徑為其目錄下的相對路徑:

但是放在瀏覽器上,它會從url上找當前路徑,就變成了去pingandai/a/static/…目錄下找資源,這肯定是找不到的。js及css資源路徑應該在pingandai/static/… 下。所以路由在history模式下打包后若要發布在springboot項目中,需要注意路徑的地址不要出現多級。

2、 如果路由模式設置的是默認的hash

如果路由是hash模式打包放到springboot的resources/static目錄下,以上history模式不能訪問二級url地址的問題就不存在了。
但是它的訪問路徑將會變成:locahost:7080/pingandai/#/a或者locahost:7080/pingandai/#/a/b才行,由於hash模式中#后面字符是頁面定位的,所以不會發送給后端(比如url上輸入的是locahost:7080/pingandai/#/a/b,后端實際收到的請求地址是locahost:7080/pingandai),這里的locahost:7080/pingandai實際上是訪問的index.html頁面(因為找不到這個頁面會跳到錯誤頁面index.html上,前提是配置了錯誤頁面),在這個頁面上顯示的內容則完全由#后面的內容控制。
但是這樣會存在一個問題,如果springboot集成了shiro,那么權限過濾時必然要設置成這樣filterMap.put("/**", "過濾器");過濾器如果是/anon,這會導至頁面所有請求都放行,剛才的locahost:7080/pingandai/#/a和locahost:7080/pingandai/#/a/b是可以訪問了,但是權限過濾不生效。如果設置成/oath(假定這里的oath是權限攔截的過濾器),那么/a和/a/b頁面又出不來。
 
由於以上問題,所以最好不要直接打包后放到spingboot下,用單獨的tomcat或nignx去部署。
 
        

 

 
        
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM