微前端（九）全局静态文件引入

电玩女神 2022-09-15 00:56 168阅读 0赞

比如主应用引入了字体文件  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]  
子应用也引入了字体文件  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
这样写当然没有问题，如果现在想减少请求次数，主应用引入了该文件，则子应用则可以不再引入啊。  
但如果子应用去掉该引入，会出现一个问题，就是直接刷新子应用界面的时候，字体图标不会显示。

*  解决方案1:还是上面说的 主应用和子应用引入相同的静态文件，缺点就是重复引用，无效开销。
 *  解决方案2：就是判断刷新，如果不是主应用刷新，而是刷新的子应用，则先跳转到主应用，然后再路由到子应用。  
    方案1就不说了，下面介绍方案2  
    第一步：在main.js里面判断刷新界面

if(window.location.href===`${ location.protocol}//${location.host}/`||window.location.href==='window.location.href!==`${location.protocol}//${location.host}/`'){ 
      console.log("----跳转到首页");
    }else{ 
      console.log("----跳转到首页--再到子应用")
      StorageUtils.addItem("curHref",window.location.href);
      window.location.href=`${ location.protocol}//${location.host}/`;
    }

第二步：在主应用入口再路由到子应用。

mounted(): void { 
              //如果点击回车 则先跳转到主应用 再定位到子应用
              setTimeout(()=>{ 
                  if(StorageUtils.getItem("curHref")!==""&&StorageUtils.getItem("curHref")!==`${ location.protocol}//${location.host}/`&&StorageUtils.getItem("curHref")!==`${location.protocol}//${location.host}`){ 
                      StorageUtils.removeItem("curHref");
                      let layoutsMainPage = findComponentsUpward(this, "layoutsMainPage");
                      //判断是否存在tab组件
                      if(layoutsMainPage&&layoutsMainPage[0]){ 
                          layoutsMainPage[0].activeMenuItem(StorageUtils.getItem("curMenuId"));
                      }
                  }
              },200)
            }

这样就解决了子应用静态文件丢失的问题。就可以将重复的静态文件都移动到主应用来进行加载了。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bf4d6faf0b254b9e8deda2dfd284c5aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6aOe5aSp5Luj56CB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/13d1daee68234052931323d030993950.png