前言

又来记笔记了…

qiankun 官网地址:https://qiankun.umijs.org/zh/guide

踩过的坑

大部分问题,官网上都是有解决方案,乾坤常用问题解决方案地址: https://qiankun.umijs.org/zh/faq

主要记录一下部署的时候遇到的问题;

  1. 主应用和子应用部署在不同服务器的情况,需要主应用配置代理,或者子应用的 ningx 配置设置一下 add_header,前端访问地址和api请求都需要设置一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

localhost /{

...

add_header Access-Control-Allow-Origin 'https://XXXXXX';
# Credentials 网站访问地址不需要,api请求需要
add_header Access-Control-Allow-Credentials 'true';
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';

if ($request_method = 'OPTIONS') {
return 204;
}

}
  1. 线上环境在子应用页面刷新浏览器之后,页面空白无法加载子应用,且回退到主应用也无法加载主应用页面;

这个问题当时花了挺长时间的,本地开发环境并不存在这个问题,随便刷新都是可以的,线上子应用刷新就直接白屏,项目文件报404错误,查了很多资料提供的解决方案都是让nginx代理,并没有什么用。最后查出来问题是子应用在打包的时候一定要配置 publicPath,不配置的情况子应用单独部署和访问虽然都是没有问题的,也就是因为单独部署和访问都没问题就导致排查问题的时候一直没往这块想!坑死~

总结

虽然刚开始的时候举步维艰、遇到了很多问题,但是项目做完之后回来总结却发现,其实并不难,真的就还挺简单的。