主应用和子应用部署(我的情况-主子项目均使用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统一资源的话,后续更新版本有点麻烦,其他的并没有深究
总结
总的来说,此时已经将主应用和子应用给运行启动起来了
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!