微前端——qiankun（乾坤）实例

一、什么是微前端

微前端就是将不同的功能按照不同的未读拆分成多个子应用，通过主应用来加载这些子应用，微前端的核心在于拆，拆完后再合

二、为什么使用微前端

1. 不同团队间开发一个应用技术栈不同
2. 希望每个团队都可以独立开发，独立部署
3. 项目中还需要老的应用代码

我们可以将一个应用划分成若干哥子应用，将子应用打包成一个个的lib，当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发的问题

三、qiankun框架

文档地址：https://qiankun.umijs.org/zh

2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。

2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。

四、qiankun框架实例

这里打算建立三个项目进行实操，都是用的vue技术栈（这里不限技术栈）,qiankun-base充当主应用，qiankun-vue和qiankun-vue1充当子应用

1、创建三个应用

1. 创建基座

   1. vue create qiankun-base

2. 创建子应用1

   1. vue create qiankun-vue

3. 创建子应用2

   1. vue create qiankun-vue1

      三个项目：基座：qiankun-base,子应用：qiankun-vue,qiankun-vue1

注意：这里如果时选的vue2.x创建的项目，之后用router和store的时候要注意版本号和写法的对应

2、项目配置（主要）

1、基座qiankun-base配置

项目创建好后我们首先进行主应用qiankun-base的配置，进入man.js文件进行配置，在main.js中加入以下代码，要注意的是，entry这项配置是我们两个子项目的域名和端口，我们必须确保两个子项目运行在这两个端口上面，container就是我们的容器名，就是我们子应用挂载的节点，相当于Vue项目里面的app节点，activeRule就是我们的激活路径，根据路径来显示不同的子应用

• 引入qiankun插件

yarn add qiankun 或者 npm i qiankun -S

• main.js配置

import Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import less from 'less';import Vuex from 'vuex';// 引入乾坤import { registerMicroApps, start, initGlobalState } from 'qiankun';import store from './store/store'Vue.use(ElementUI)Vue.use(less)Vue.use(Vuex)Vue.config.productionTip = falselet propsData = {sex: '女',age: 18,userName: '小莫'}const actions = initGlobalState(propsData);// 主项目项目监听和修改（在项目中任何需要监听的地方进行监听）actions.onGlobalStateChange((state, prev) => {//state变更后的状态，prev变更前的状态console.log("改变前的值", prev);console.log("改变后的值", state);});//将actions对象绑到Vue原型上，为了项目中其他地方方便使用Vue.prototype.$actions = actionsconst apps = [{name: 'vueApp1',//应用的名字entry: '//localhost:8081',//默认会加载这个html解析里面的js动态的执行(子应用必须支持跨域)fetchcontainer: '#vue1',//容器名activeRule: '/main/vue',//激活的路径props: propsData,},{name: 'vueApp2',//应用的名字entry: '//localhost:8082',//默认会加载这个html解析里面的js动态的执行(子应用必须支持跨域)fetchcontainer: '#vue2',//容器名activeRule: '/main/vue1',//激活的路径props: propsData,}]registerMicroApps(apps);//注册应用start({prefetch: false//取消预加载});//开启new Vue({router,store,render: h => h(App),}).$mount('#app')

• 配置完之后，这里我写了一个侧边栏引用其他子应用到基座中

• HomeAboutqiankun-vue1qiankun-vue2import { start } from "qiankun";export default {name: "Main",mounted() {if (!window.qiankunStarted) {window.qiankunStarted = true;start();}},};.main-content {height: 100%;& > .el-container {height: 100%;.el-header {background-color: #3f4044;display: flex;align-items: center;.logo {height: 40px;width: auto;cursor: pointer;}}& > .el-container {height: 100%;& > .el-aside {background-color: #d3dce6;width: 200px !important;.el-menu-vertical-demo {height: 100%;}}.el-container {.el-main {// background-color: #e9eef3;// color: #333;}}}}}

  2、子应用qiankun-vue配置

• main.js配置

/* * @Author: mowencong 2829621014@qq.com * @Date: 2022-08-26 15:57:22 * @LastEditors: mowencong 2829621014@qq.com * @LastEditTime: 2022-08-29 10:50:43 * @FilePath: \qiankun\qiankun-vue\src\main.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */import Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)Vue.config.productionTip = falselet instance = nullfunction render(props){instance = new Vue({router,render:h => h(App)}).$mount('#qkApp1');//这里是挂载到自己的html中，基座会拿到这个挂载后的html，将其插入进去//注意：这里#qkApp1在index.html和app.vue的挂载点的id名要同步修改}if(window._POWERED_BY_QIANKUN_){//动态添加publicPath_webpack_public_path_ = window._INJECTED_PUBLIC_PATH_BY_QIANKUN_;}if(!window._POWERED_BY_QIANKUN_){//默认独立运行render();}//父应用加载子应用，子应用必须暴露三个接口：bootstrap,mount,unmount//子组件的协议就ok了export async function bootstrap(props){};export async function mount(props){//加了true之后，会自动调取前面这个回调方法，这样可以拿到主应用（基座）修改的值props.onGlobalStateChange((state,prev) => {console.log(state,prev);},true);Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange;Vue.prototype.$setGlobalState = props.setGlobalState;console.log('是啥类型',Object.prototype.toString.call(props.onGlobalStateChange))render(props);}export async function unmount(props){instance.$destroy();}

router.js的配置

/* * @Author: mowencong 2829621014@qq.com * @Date: 2022-08-26 17:05:52 * @LastEditors: mowencong 2829621014@qq.com * @LastEditTime: 2022-08-29 09:37:57 * @FilePath: \qiankun\qiankun-vue\src\router\index.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter);const routes = [{path: '/',redirect: '/main/vue/'},{path: '/main/vue/',name: 'Home',component: Home},{path: '/main/vue/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}]const router = new VueRouter({mode: 'history',base: window.__POWERED_BY_QIANKUN__ " />

vue.config.js的配置

/* * @Author: mowencong 2829621014@qq.com * @Date: 2022-08-26 15:57:22 * @LastEditors: mowencong 2829621014@qq.com * @LastEditTime: 2022-08-29 10:08:14 * @FilePath: \qiankun\qiankun-vue\vue.config.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */module.exports = {lintOnSave:false,//关闭eslint检测devServer:{port:8081,//这里的端口必须和父应用配置的子应用端口一致headers:{//因为qiankun内部请求都是fetch请求资源，所以子应用必须允许跨域'Access-Control-Allow-Origin':'*',}},configureWebpack:{output:{//资源打包路径library:'vueApp1',libraryTarget:'umd'}}}

3、注意点

1）如何在主应用的某个路由页面加载微应用

react + react-router技术栈的主应用：只需要让子应用的activeRule包含主应用的这个路由即可

vue + vue-router技术栈的主应用

例如：主应用需要在login页面登录，登录成功后跳转到main后台管理页面，在main管理页面下可以显示子应用

修改主应用router.js

//如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个子组件即可//本案例就是有子路由，所以需要才后面重新定义main页面的路由const routes = [{path:'/',name:'Login'，component:Login},{path:'/main',name:'Main',component:Main,children:[{path:'/home',name:'Home',component:Home},{path: '/about',name: 'About',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')}]},{path: '/main/*',name: 'Main',component: Main,}]

修改主应用main.js 的文件

// 子应用的 activeRule 需要包含主应用的这个路由 pathconst apps = [{name: 'vueApp', // 应用的名字entry: '//localhost:8081', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetchcontainer: '#vue', // 容器名activeRule: '/main/vue', // 激活的路径props: { a: 1 }},{name: 'reactApp',entry: '//localhost:20000', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetchcontainer: '#react',activeRule: '/main/react',}]registerMicroApps(apps); // 注册应用