目前的微前端,主要使用的mountparcel實現的各個模組資源在main-container的切換。
同時,有乙個系統管理的模組,專門進行資源的管理配置,可以跨模組引用頁面資源,並註冊組合頁面。
對於模組a的某個選單c,引用模組b的資源頁面d
- 模組a和模組b,部署在兩個不同的伺服器
- 後端的伺服器位址和鑑權也是兩套
- oauth登入方式
這時候,跨模組引用資源的時候,資源、介面呼叫等,會失敗
一、靜態資源
c選單對應的頁面d,資源位址如「/modules/b/imgae/a***x.png」,會自動拼接模組a的路由路徑,最終為`http://aip:port/modules/b/imgae/a***x.png`,但是,實際資源位址在`http://bip:port/modules/b/imgae/a***x.png`
解決方案:
使用__webpack_public_path__,可以從資源管理的模組資源位址,獲取動態publicpath,設定靜態資源的完整路徑,保證,訪問的時候,使用的是全路徑,可避免絕對路徑引起的訪問報錯問題
二、介面訪問
模組b常規頁面介面呼叫,書寫形式為`/moduleb/api/getlist`,如果在模組b部署的伺服器訪問,會根據nginx配置,自然**到對應的後端介面伺服器。
但是,如果作為模組a引用了模組b的頁面,模組a部署的伺服器配置的nginx**,怎麼**到模組b的nginx配置的介面**位址,同時,解決,a/b模組後端兩個伺服器的不同鑑權的問題呢?
前端相關總結
arr.indexof i 判斷i是否在arr陣列中。js方法 var arr new array js新建陣列。xx jquery選擇器。text 獲取或者改變指定元素的文字 jquery html 獲取或改變指定元素的html元素以及文字 jquery val 獲取或者改變指定元素的value值...
前端相關js
詳解 這是個是ie8的專用標記,用來指定ie8瀏覽器去模擬某個特定版本的ie瀏覽器的渲染方式 比如人見人煩的ie6 以此來解決部分相容問題,例如模擬ie7的具體方式如下 但令我好奇的是,此處這個標記後面竟然出現了chrome這樣的值,難道ie也可以模擬chrome了?迅速搜尋了一下,才明白原來不是微...
前端相關 表單嚮導
表單嚮導 smart ui 部件允許您快速建立表單嚮導介面。了解 jquery steps 基礎表單嚮導 這是乙個簡單的表單嚮導示例 當前步驟 1.第一步 2.第二步 3.第三步 第一步 第一步 這是第一步的內容 第二步第三步 上一步 下一步 完成 取消 帶驗證的表單嚮導 帶驗證的表單嚮導 下面這個...