微前端相關問題

2021-10-13 07:48:01 字數 757 閱讀 9145

目前的微前端,主要使用的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.第三步 第一步 第一步 這是第一步的內容 第二步第三步 上一步 下一步 完成 取消 帶驗證的表單嚮導 帶驗證的表單嚮導 下面這個...