springboot怎么使用vue打包過的頁面資源

發布時間：2021-03-05 15:49:22 來源：億速云閱讀：369 作者：小新欄目：編程語言

這篇文章將為大家詳細講解有關springboot怎么使用vue打包過的頁面資源，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

這篇文章主要介紹了springboot如何使用vue打包過的頁面資源,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

（一）webpack打包

如果在vue基于webpack的，build打包后得到的是如下的資源文件：

webstorm中提示如下：

這個大致的意思就是這邊的文件需要放在http服務器上訪問，如果直接打開的話，無法生效。

道理也很簡單，基本上這里面引的路徑都是服務器的路徑。

（二）后端springboot項目

將dist目錄拷貝到resources目錄下：

在 properties文件里面設置 spring.resources.static-locations=classpath:/dist

spring.resources.static-locations 的默認值是：classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

區別：spring.mvc.static-path-pattern，這個配置的意思是什么樣的路徑，才到spring.resources.static-locations中查找靜態文件, 默認的配置就是/**，就是全部的路徑

如：spring.mvc.static-path-pattern=/static/**, 當訪問/static/css/demo.css時，會拿/css/demo.css到spring.resources.static-locations配置的目錄中去查找。

測試下訪問靜態文件：

http://localhost:9999/static/css/app.30790115300ab27614ce176899523b62.css

可以返回。

訪問index.html:

關于“springboot怎么使用vue打包過的頁面資源”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節