SpringBoot集成vue的開發(fā)解決方案
最近由于工作要求：前端采用vue開發(fā)，后端采用springboot開發(fā)，前后端分離開發(fā)，最后前端頁面又整合到后端來。經(jīng)歷多次采坑，總結(jié)以下方案：
vue build后的文件部署到springboot目錄
vue打包后，會生成dist目錄
springboot靜態(tài)資源目錄如下：
SpringBoot處理靜態(tài)資源和頁面，設(shè)置如下：
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
super.addResourceHandlers(registry);
}
頁面模板設(shè)置，如下：
#頁面模板設(shè)置 spring.thymeleaf.option=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.cache=false
部署方案：
dist的index.html 直接放在templates目錄下
dist的css、fonts、img、js 直接放在static目錄下
vue打包后vendor文件過大的優(yōu)化方案
vue使用vue-cli打包后，vendor就將vue.js其他引用的包一起壓縮打包進(jìn)去，導(dǎo)致vendor文件超過1M，影響頁面加載速度
本項目使用了vue、vue-router、iview、axios、echarts等
（1）使用vue、vue-router、iview、axios、echarts等cnd引用
在index.html文件中，增加：
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script> <script src="https://unpkg.com/iview@3.4.0/dist/iview.min.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script> <script src="https://unpkg.com/echarts@4.2.1/dist/echarts.min.js"></script>
（2）打包時，排除vue、vue-router、iview、axios、echarts等打包
在webpack.base.conf.js文件中，module.exports={…} 方法中添加
module.exports = {
...
externals:{
'vue':'Vue',
'axios':'axios',
'vue-router':'VueRouter',
'iview':'iview',
'echarts':'echarts',
},
...
}
這里有注意的是：命名問題
比如：vue-router的在https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js中默認(rèn)采用VueRouter，所以在import vue-router一定要使用VueRouter，而不能使用其他別名。
vue默認(rèn)別名是Vue
axios默認(rèn)別名是axios
vue-router默認(rèn)別名是VueRouter
iview默認(rèn)別名是iview
echarts默認(rèn)別名是echarts
例子：
import Vue from 'vue'
import VueRouter from 'vue-router'
import iview from 'iview'
import echarts from 'echarts'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
...
})
（3）vue-router的路由頁面設(shè)置為按需加載
export default new VueRouter({
mode: 'history',
routes: [
//頁面1
{
path: '/Page1',
name: 'page1',
component: () => import('@/views/Page1.vue')
},
//頁面2
{
path: '/Page2',
name: 'page2',
component: () => import('@/views/Page2.vue')
}
]
});
（4）重新打包后vendor.js文件就小了，可以小到1k哦
vue-router使用了history模式，vue其實做的是單頁面應(yīng)用，但是效果看上去是多個不同頁面，問題來了，部署到線上環(huán)境后，該如何配置？
百度上有很多處理方案，比如：使用errorPage方式處理，nginx配置等，這些問題比較繁瑣，而且在部署過程中，一堆問題。
經(jīng)過多次嘗試，發(fā)現(xiàn)有一個最簡單方法，Controller直接url路徑配置到index.html即可，而且輕松解決history模式帶來的后端問題，如下：
@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page1")
public String page1() {
return "index";
}
@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page2")
public String page2() {
return "index";
}
這種方案非常有利于后端開發(fā)人員做更多的進(jìn)一步操作，比如：給每個頁面增加頁面權(quán)限等。
注意：該方案目前適用于前端頁面整合到后端的項目工程。
到此這篇關(guān)于SpringBoot集成vue的開發(fā)解決方案的文章就介紹到這了,更多相關(guān)SpringBoot集成vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- spring boot+vue 的前后端分離與合并方案實例詳解
- vue+springboot前后端分離實現(xiàn)單點登錄跨域問題解決方法
- 如何把vuejs打包出來的文件整合到springboot里
- vue+springboot實現(xiàn)項目的CORS跨域請求
- 使用springboot結(jié)合vue實現(xiàn)sso單點登錄
- springboot整合vue項目(小試牛刀)
- 解決Vue調(diào)用springboot接口403跨域問題
- Springboot項目與vue項目整合打包的實現(xiàn)方式
- 部署vue+Springboot前后端分離項目的步驟實現(xiàn)
- springboot整合vue實現(xiàn)上傳下載文件
相關(guān)文章
java.net.ConnectException: Connection refused問題解決辦法
這篇文章主要介紹了java.net.ConnectException: Connection refused問題解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
繼承就是可以直接使用前輩的屬性和方法。自然界如果沒有繼承，那一切都是處于混沌狀態(tài)。多態(tài)是同一個行為具有多個不同表現(xiàn)形式或形態(tài)的能力。多態(tài)就是同一個接口，使用不同的實例而執(zhí)行不同操作2022-04-04
這篇文章主要介紹了如何通過Java代碼實現(xiàn)KMP算法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Java多線程編程中線程鎖與讀寫鎖的使用示例,鎖是控制程序多線程并發(fā)的重要手段,需要的朋友可以參考下2016-04-04
TypeHandler被稱作類型處理器，MyBatis在設(shè)置預(yù)處理語句中的參數(shù)或從結(jié)果集中取出一個值時，都會用類型處理器將Java對象轉(zhuǎn)化為數(shù)據(jù)庫支持的類型或者將獲取到數(shù)據(jù)庫值以合適的方式轉(zhuǎn)換成Java類型，感興趣的同學(xué)可以參考下文2023-05-05
這篇文章主要介紹了Java Spring Event事件監(jiān)聽詳情解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
本文主要介紹了java中的重載和重寫的區(qū)別。具有一定的參考價值，下面跟著小編一起來看下吧，希望能夠給你帶來幫助2021-11-11
SpringBoot中@KafkaListener使用${}動態(tài)指定topic問題
在SpringKafka中,使用${}引用Spring屬性配置,可以在不同環(huán)境中重新配置topic名稱,而無需修改代碼,在application.properties或application.yml中定義topic名稱,并在代碼中使用${}引用2024-12-12
Java實現(xiàn)的properties文件動態(tài)修改并自動保存工具類
這篇文章主要介紹了Java實現(xiàn)的properties文件動態(tài)修改并自動保存工具類,可實現(xiàn)針對properties配置文件的相關(guān)修改與保存功能,需要的朋友可以參考下2017-11-11
這篇文章我們來看一篇關(guān)于Java8新特性之泛型的類型推導(dǎo)，希望這篇文章能夠讓各位深入到了解到關(guān)于Java8新特性之泛型的類型用法，有需要的朋友們下面來一起看看吧。2016-09-09