qiankun简单服务搭建记录

子应用和主应用的文件结构

搭建步骤

1. 新建一个文件夹在里面放主应用和各个子应用，在同一级文件夹下

2.首先来配置主应用，主应用可以选用任意的技术栈

• 安装依赖 qiankun是必须的，其他根据主应用使用的技术栈以及需求安装
• webpack文件配置（框起来的属性为必须配置，其他根据应用需要配置即可）

• 入口文件index.html配置 配置菜单栏用于路由跳转，通过history.pushState跳转不同子应用，设置子应用容器

• 入口文件index.js配置

1. 初始化应用（非必要步骤） 2.注册子应用

通过registerMicroApps注册子应用

子应用参数：

 registerMicroApps([{ name: 'vue',//子应用名称
  entry: '//localhost:8081',//子应用入口
  container: '#subapp-viewport',//装子应用的容器
  loader,//vue实例
  activeRule: '/vue',//子应用对应地址
  }])
  

3.设置默认进入的子应用 setDefaultMountApp('/vue');

4.启动应用 start();

参考配置项

3.子应用配置

需要暴露mount，unmount，bootstrap这三个钩子，在mount函数里面执行子应用初始化操作 vue项目需要配置vue.config.js,配置打包出来的文件格式为umd vue子应用示例

普通项目需要把应用钩子放在全局window下 不使用框架的子应用示例

• 一些生命周期钩子 主应用 主应用启动：runAfterFirstMounted GlobalState发生变更：onGlobalStateChange 子应用切换：beforeLoad，beforeMount，afterUnmount 子应用 mount，unmount，update（仅使用loadMicroApp时生效）

踩坑记录

1. 报错# vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function 问题原因：版本对不上，方法在vue2上不存在 解决方案：安装时选择插件固定版本 这里遇到的问题是vue-router版本的问题，安装的是4.x的版本，版本太高，降级为3.x，解决 版本对应表 参考链接：blog.csdn.net/qq_36521981…

2. 请求vue子应用服务跨域报错，报错图示如下：

问题原因：子应用未配置跨域header 解决方案：子应用加上跨域参数配置

qiankun服务搭建示例：github.com/umijs/qiank… 官网地址：qiankun.umijs.org/