前端單頁面應用分布式部署探索
公司后臺Java使用的Spring Cloud的微服務框架,訂單,商品,報價,每一個模塊都是一個微服務,一個包,獨立打包,單獨部署.避免了業務代碼之間的強耦合,包也變小了.這是背景.
近兩天,公司項目準備重構,領導讓我們調研一下將前端項目也重構成微服務模式,即,各個模塊單獨打包,分別部署,再推辭不掉,我開始了前端分布式的探索.
將前端分包編譯,部署,首先想到的思路是使用webpack來實現.但研究了幾天,看了很多webpack的配置文檔,無奈,換個思路吧,
將每個模塊單獨編譯成一個包,然后使用iframe嵌套到基礎框架包里面,雖然使用iframe嵌套的方式有很多缺點,但目前也只有這么一條路行的通了.
但是這條思路有幾個問題需要提前解決一下
1:外部路由定位到內部內容的問題
2:組件資源依賴,版本管理的問題
3:域名部署,iframe操作的封裝
4:跨應用 跨iframe的狀態管理.
接下來我一個一個來解決
在路由router.js中這寫一個組件
{
path: '/iframe',
name: 'iframe',
component: () => import(/* webpackChunkName: "about" */ './views/Iframe.vue'),
children: [
{
path: '/iframe/*',
component: ()=> import('./views/OtherMain.vue'),
name: '加載外部的內容'
}
]
}
這個就是存放iframe的組件
OtherMain.vue組件中代碼如下:
1111111111111
{{url}}
方法changeUrl 可以提取出來,作為一個當前路徑匹配資源文件的轉換器. 大致的思路就是這樣,使用正則路由,搭配上路由守衛.監聽組件url的改變,從而改變ifram的url
web前端 分布式
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
