ant design pro vue 安装使用

前提：

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

 

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: '/'。