qiankun微前端实践（二）

Skyshine
2,065 阅读2分钟

主应用和子应用部署（我的情况-主子项目均使用history路由）

按照常规的部署方式进行部署

主应用加载子应用资源

主应用使用fetch获取资源跨域，需要在注册的每个子应用nginx配置跨域头

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

此时访问子应用是正常

子应用接口调用

当使用微前端时，子应用的请求挂载到了主应用的域名上面，而主应用并不能直接调通，此时有两种方案

方案一：

在主应用的nginx上面配置子应用所需要的转发代理

方案二：

将各个环境的域名传入子应用，设置子应用请求的baseUrl

经过测试，两种方案均可实现接口调用

关于菜单权限以及按钮权限的主子应用传参

主应用获取整个项目的路由并动态加载，并将按钮权限key下发到子应用下面，子应用通过这些权限key控制按钮的展示

主子传参

props

Actions 通信
相关api：
initGlobalState 
MicroAppStateActions

关于主子应用样式问题

为了让子应用能够和主应用的风格搭配，另外起了一个样式文件专门使用， 而这个文件的导入需要判断参数，所以可以在js'代码中引入

if (window.__POWERED_BY_QIANKUN__) {
  import('./styles/common_qiankun.scss')
}

关于切换子应用后并没有触发子应用加载问题(对于我遇到的情况来讲)

查看路由配置path是否空缺或者错误

动态加载路由时，尽量在每级路由加上path,不然可能会遇到问题

关于接入SSR项目（原理差不多，只是把nginx上配置加在了服务端上面）

在我开发中有个项目为express中转的ssr项目

1、配置访问的二级路由
2、在前端代码的和之前的子应用一样暴露生命周期方法，已经webapck打包参数判断
3、在express启动文件加上跨域配置

关于主应用和子应用使用相同的依赖

目前的方法，各自的依赖放在各自的子应用使用，使用cdn统一资源的话，后续更新版本有点麻烦，其他的并没有深究

总结

总的来说，此时已经将主应用和子应用给运行启动起来了

avatar
文章
阅读
粉丝