Ant-Design-Pro使用QianKun微前端最佳实践

前提：

做项目时偶然了解到微前端的概念，在详细了解后觉得对分解【巨石】应用有很大的帮助，查阅了一些文档和资料后自己整了一套，以备后用~

GitHub代码地址：

Ant-Design-Pro使用QianKun微前端最佳实践https://github.com/IversonTian/Ant-Design-Pro-QianKun

文档资料：

QianKun官网https://qiankun.umijs.org/zhUmi JS v4关于QianKun的使用说明https://umijs.org/docs/max/micro-frontendAnt Design Pro🏆 让中后台开发更简单 包含 table form 等多个组件。https://pro.ant.design/zh-CN/docs/getting-started详解Ant-Design-Pro使用QianKun微服务目录主应用配置子应用配置微服务现在挺火的,优点也很明显如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umij...http://www.cppcns.com/wangluo/javascript/465532.html废话不多说，直接开始~~~

1、根据Ant-Design-Pro文档中的开始使用快速初始化 2个（一个主项目一个子项目）Ant-Design-Pro项目

Ant-Design-Prohttps://pro.ant.design/zh-CN/docs/getting-started

2、重命名生成的文件：

Ant-Design-Pro-Main

Ant-Design-Pro-SubAppA

3、主应用和子应用都要安装qiankun插件：

yarn add @umijs/plugin-qiankun -D

4、修改主应用的启动端口为9000，子应用的启动端口为9001 (可以自行配置，后面对应修改就行)

如何修改启动端口？

在项目的根目录添加.env文件并配置其端口地址

 

主应用（Ant-Design-Pro-Main）配置

1、config.ts配置：

2、app.tsx配置：

注：这个entry,就是子应用的地址,可以写成变量形式,区分本地和线上环境~

 

 3、修改document.ejs文件，可以解决页面一直加载问题：

<div id="<%= context.config.mountElementId %>">

4、修改routes.ts文件：

 5、配置proxy.tx接口代理：

注：因为在主应用,请求的地址是主应用的，要代理回子应用的请求地址,如果已经有类似/api这种前缀，要注意主应用和子应用区分，不要用相同的前缀~

 子应用（Ant-Design-Pro-SubAppA）配置

1、config.ts配置：

2、app.tsx配置：

注：子应用可以通过生命周期函数拿到主应用传递的参数。如果子应用本身是有菜单、面包屑等，应该要区别设置，在子应用不显示，否则会重复显示~

 

3、routes.ts文件：（正常配置就可以）

4、proxy.ts文件：

 

分别启动主子应用：

 npm run start

 

 项目实际可能需要解决的问题

1、子应用运行时，会自动添加前缀因为qiankun框架的代码切割，子应用运行时会根据package.json里的name加入一个前缀。如果不想要可以在config.ts里配置base: '/'。

2、 子应用路由匹配问题：

为了主应用的路由地址和子应用一致，配置路由时microAppProps的base传了''这样会导致子应用页面加载错误或登录态失效时，页面显示404页面。因为现在是精确的路由匹配,没有登录会重定向到登录页，这样就会找不到页面。一般设置好登录态不会有这个问题，不过想要完善点可以写上错误路由跳转到登录页面或者提示刷新页面等~

---------------------------------------------------------------------------------------------------------------------------------

如果遇到跟着文档配置，项目启动报错问题，可能是项目运行问题，可以尝试重启，删包重装

在加入qiankun组件前，可以备份代码，配置运行好后再加入代码中，以免出现运行报错代码又恢复不了情况o(╯□╰)o