qiankun微前端接入笔记

简介：

　　本文是对qiankun微服务的简单探索，只是尝试了基于qiankun架构接入最简单的应用场景，并记录了这个过程中遇到的问题，和一些简单的理解。文章有点长，但是并不复杂，放了很多截图。

qiankun官网地址：

　　https://qiankun.umijs.org/zh/guide/tutorial

准备工作：

　　通过官网了解，qiankun主要分为两部分：（1）负责路由注册，资源加载的主服务（2）所有拆分后的子服务。通过主服务的统一调度，完成对子服务的管理。

所以，主服务是单独的一层，作为所有子服务的统一访问入口，子服务则在主服务后面一层。

　　在这里，我们创建两个子服务的demo，通过vue-cli快速创建即可。主服务的话，搭建最简单的webpack构建环境，只在entry文件中写qiankun的api调用逻辑，其他任何内容不加。下面对主服务和子服务做具体介绍。

主服务：

文件目录结构：

目录及内容介绍：

　　 src：src文件夹里有两个文件，index.js和index.html。index.html就是最简单的html模板文件，webpack基于此文件输入最终的/dist/index.html。index.js中包含了qiankun的主服务所有逻辑，非常简单。

　　 index.html如图：

index.js 如图：

server：server文件夹里只有一个server.pro.js，里面是最简单的基于node的http服务。由于主服务是webpack构建环境，所以本地调试要依赖webpack-dev-server。但是我在调试中发现，主服务其实对静态资源有两部分功能。一个是对.js，.css等静态资源的相应，另外一个是对路由（url）的相应。对静态资源的相应比较好处理，但是对路由的相应却有个特殊的地方。比如url是"/demo1/a"，/demo2/b，/pro......这些路由其实对主服务而言，只需要返回index.html就好。因为这些路由其实都是子服务的路由，主服务接收这些路由后，只需要加载主服务自己的index.html文件，执行index.html依赖的js，即可动态加载子服务js资源，然后命中路由，渲染页面即可。对于第二部分功能需求，webpack-dev-server配置起来比较麻烦，所以，我就写了一个简单的http服务用于主服务调试。server.pro.js如下图：

dist：dist文件夹中存放了webpack构建后的资源，包括index.html和js文件夹，js文件夹下包含了所有构建后的js资源

其他文件夹及文件的内容无需关注，只是为了搭建最简单的webpack环境。

子服务：

　　子服务通过vue/cli快速创建了两个项目，分别占用8080端口和8081端口，代码几乎一样，只有演示页面的内容有点差别。安装：npm install -g @vue/cli，创建项目：vue create project-1 && vue create project-2。这里介绍project-1项目：

文件目录结构：