微前端这个词这两年很频繁的出现在大家的视野中，主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。

下面是微前端的概念图。

为什么需要微前端？

1. 项目前端是单体应用即负责貌美如花还要赚钱养家，而后端使用微服务只需要负责分家家然后给前端送朵花花。前端单体承担了所有的接口。

2.系统模块增多，前端单体应用变得肥胖，开发效率低下，构建速度变慢。前端心想：哼，老娘就使劲的吃，浏览器也别想看见我，卡死你。

3.公司人员扩大，需要多个前端团队独立开发，独立部署，如果都在一个仓储中开发会带来一系列问题，例如：老子辛苦一天写的代码，第二天让别人弄没了。

4.解决遗留系统问题，新模块需要使用最新的框架和技术，旧系统还继续使用。

5.单体前端带来的测试问题。前端小姐姐分模块测试，这时正遇到构建发布，多人运动戛然而止。

6.编不下去了。。。。。。

微前端技术选型之路

目前关注度和成熟度最高的应该就是 single-spa，但是国内也有很多团队都有自己的微前端框架，像蚂蚁金服的qiankun,phodal 的 mooa,阿里飞冰的icestark，这些都是比较出名的微前端解决方案。但是这些框架都有一定的局限性，像mooa是针对Angular 打造的主从结构的微前端框架，icestark是最近才出的方案，而qiankun官网的开发文档就仅仅的几十行。本文将对qiankun进行几个方面讲解。

聊一聊qiankun

没错，qiankun正是光天化日，朗朗乾坤的乾坤。qiankun是一个开放式微前端架构，支持当前三大主流前端框架甚至jq等其他项目无缝接入。

qiankun是基于路由配置，适用于 route-based 场景，通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能。

qiankun在Vue项目中的使用

1、微前端构建

构建主应用

1、使用vue脚手架初始化项目或者原有Vue项目

2、npm install qiankun –save下载qiankun微前端方案依赖

3、改造主项目,很简单，在src创建一个qiankun文件夹,创建init.js文件，文件内容：

import {
  registerMicroApps, // 注册子应用方法
  setDefaultMountApp, // 设默认启用的子应用
  runAfterFirstMounted, // 有个子应用加载完毕回调
  start, // 启动qiankun
  addGlobalUncaughtErrorHandler, // 添加全局未捕获异常处理器
} from "qiankun";
function genActiveRule(routerPrefix) {//路由监听
return location => location.pathname.startsWith(routerPrefix);
}
export default function startQiankun() {
const apps = [//子应用配置
    {
name: \'admin\',
entry: "//localhost:9528",
container:\'#admin\',//将子应用节点挂载到父应用定义id=admin的div上
      activeRule: genActiveRule(\'/admin\'),//路由前缀
      props: {mag:”我是主应用”} //父应用给子应用传参
    }
  ]
//注册子应用
  registerMicroApps(apps, {
beforeLoad: [//子应用加载生命周期，下同
      app => {
console.log("before load", app);
      }
    ],
beforeMount: [
app => {
console.log("before mount", app);
      }
    ],
afterUnmount: [
app => {
console.log("after unload", app);
      }
    ]
  })
// 设置默认子应用
//   setDefaultMountApp(\'/admin\');
// 第一个子应用加载完毕回调
  runAfterFirstMounted((app) => {
console.log(app)
  });
// 启动微服务
  start({
prefetch: \'all\'//预加载子应用静态资源
  });
// 设置全局未捕获一场处理器
  addGlobalUncaughtErrorHandler(event => console.log(event));
}

4、在App.vue中加入

即可

<template>
<div class="app-wrapper" :class="classObj">
<div v-if="device === \'mobile\' && sidebar.opened" class="drawer-bg" @click="handleClickOutside">div>
<sidebar  v-if="!isFullModel" class="sidebar-container">sidebar>
<div class="main-container" :style="isFullModel?\'margin-left:0px;\':\'\'">
<navbar>navbar>
<tags-view v-if="!isFullModel">tags-view>
<div id="admin" :style="`height:calc(100vh - ${isFullModel ? 54: 84}px);`">div>//子应用盒子
div>
div>
template>

5、最后将init.js在main.js引入

import startQiankun from \'./qiankun/init/index\'
let app = null
async function render({ appContent, loading } = {}) {
  if (!app) {
    await ReadConfig(Vue)//加载配置文件
    app = new Vue({
      router,
      store,
      i18n,
      render: h => h(App),
    }).$mount(\'#app\')
  } else {
    // app.content = appContent;
    // app.loading = loading;
    console.log(loading, appContent)
  }
}
render()
startQiankun()

构建子应用

1、使用vue脚手架初始化项目

2、在main.js中加入：

let router = null;
let instance = null;
if (window.__POWERED_BY_QIANKUN__) { 
  //处理资源
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 
  }
//下面的 /admin  与主应用  registerMicroApps 中的  activeRule 字段对应
function render(props = {}) {
  const {container} = props
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? \'/admin\' : \'/\',
    mode: \'history\',
    routes,
  });
  const create = async () => {
    // await ReadConfig(Vue)
    instance = new Vue({
      router,
      render: h => h(App),
    }).$mount(container ? container.querySelector(\'#app\') : \'#app\');
  }
  create()
}
if (!window.__POWERED_BY_QIANKUN__) {//判断是否在qiankun环境下
  render();
}
// 导出子应用生命周期 挂载前
export async function bootstrap(props) {
  console.log(\'[vue] vue app bootstraped\');
}
export async function mount(props) {// 导出子应用生命周期 挂载前 挂载后
  render(props);
}// 导出子应用生命周期 挂载前 卸载后
export async function unmount() {
  instance.$destroy();
  instance = null;
  router = null;
}

3、创建vue.config.js文件,需要做一些打包配置。

const path = require(\'path\');
const packageName = require(\'./package\').name;
function resolve(dir) {
  return path.join(__dirname, dir);
}
const dev = process.env.NODE_ENV === \'development\'
const port = 9528; // dev port
module.exports = {
  publicPath: dev ? `//localhost:${port}` : \'/\',
  outputDir: \'dist\',
  assetsDir: \'static\',
  filenameHashing: true,
  devServer: {
    hot: true,
    historyApiFallback: true,
    port,
    overlay: {
      warnings: false,
      errors: true,
    },
    headers: {
      \'Access-Control-Allow-Origin\': \'*\',
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        \'@\': resolve(\'src\'),
      },
    },
    output: {// 把子应用打包成 umd 库格式
      library: `${packageName}-[name]`,
      libraryTarget: \'umd\',
      jsonpFunction: `webpackJsonp_${packageName}`,
      globalObject: \'this\',
    },
  },
};

2、微前端解决的问题

自此，一个父子前端微应用搭建成功，当然这只是简单的vue实现，真正复杂的是一个项目中每个模块使用不同的前端框架。效果如下：

我们可以看到A模块、B模块和C模块三个微应用分别运行在Vue、React和Angular的环境中，而主应用主要提供了NavBar和SideBar的界面。中心是微应用中组件显示的界面。

我们从图中可以看出将前端微服务化后解决了什么问题：

1、当A模块需要维护时，只需要动A模块的代码，维护完成之后对A项目进行构建发布，由于体积很小，构建发布就很快。

2、当A项目构建发布时，其他应用运行正常，避免了之前单体应用构建发布导致整个前端项目无法访问。

3、主应用可以捕捉到子应用的运行状态，如果子应用出现异常或者挂掉，可以对用户进行友好提示。例如当A模块挂掉后，用户点击其功能一将提示“功能正在维护中”。

4、由于子应用运行的环境不同，项目可以加入各种各样的技术栈，解决了前端人员因为技术栈不同无法聚合的问题。

5、每个子项目拥有独自的仓储，代码易维护，并且可以用到别的项目中，这样一来，每个微前端又可以作为一个微应用提供服务。

3、微前端开发中需要解决的问题

父子应用通信

父向子通信（Shared 通信方案）

Shared 通信方案的原理就是，主应用基于 Vuex维护一个状态池，通过 shared 实例暴露一些方法给子应用使用。同时，子应用需要单独维护一份 shared 实例，在独立运行时使用自身的 shared 实例，在嵌入主应用时使用主应用的 shared 实例，这样就可以保证在使用和表现上的一致性。

1、在主应用中创建shared.js,可以将需要给子应用传的数据通过getter和setter的方式设置。

import store from "../../store";
class Shared {
//获取 Token
  getToken() {
const state = store.state;
return state.user.token || "";
  }
  setToken(token) {
// 将 token 的值记录在 store 中
    store.commit(\'SET_TOKEN\',token);
  }
}
const shared = new Shared();
export default shared;

2、在init.js注册的子应用中，将shared传递过去

const apps = [
  {
    name: \'admin\',
    entry: "//localhost:9528",
    container:\'#admin\',
    activeRule: genActiveRule(\'/admin\'),
    props: {
      shared,//将数据以类的方式传递
    }
  }
]

3、当主应用登录成功之后可以通过调用shared.setToken(token)设置token,然后主应用通过自身路由跳转到主页this.$router.push({ path: \’/\’ })。

4、现在，我们来处理子应用需要做的工作。我们希望子应用有独立运行的能力，所以子应用也应该实现 shared，以便在独立运行时可以拥有兼容处理能力。代码实现如下：

class Shared {
 //获取 Token
 getToken() {
    // 子应用独立运行时，在 localStorage 中获取 token
    return sessionStorage.getItem("token") || "";
  }
 setToken(token) {
    // 子应用独立运行时，在 localStorage 中设置 token
    sessionStorage.setItem("token", token);
  }
 }
 class SharedModule {//通过SharedModule 来维护shared
  static shared = new Shared();
  static overloadShared(shared) {
    SharedModule.shared = shared;
  }
  static getShared() {
    return SharedModule.shared;
  }
}
 export default SharedModule;

5、接下来我们只需要在子应用的入口文件接受父应用传来的shared,然后设置到SharedModule 中。

export async function bootstrap(props) {
  const {shared = SharedModule.getShared() } = props;
  SharedModule.overloadShared(shared);
}

6、然后子应用就可以在组件中通过SharedModule获取shared然后得到token,最后发起网络请求。

mounted () {
const shared = SharedModule.getShared();
const token = shared.getToken();
let resp =await this.dispatch(AppController.findById, {id: this.currentApp.appId})//封装之后的网络请求
...
}

子向父通信（emit通信）

emit通信的原理是子应用通过触发父应用传递的函数来改变父应用vuex中维护的状态，进而达到子应用想父应用的通信。这里以子应用向父应用发送token失效，让父应用跳转至登录页的场景。

1、父应用定制提供子应用触发token注销的函数

import store from "../../store";
import { removeToken } from \'@/utils/auth\'
function logout(childThis) {
  removeToken()
  childThis
    .$confirm(\'登录信息已过期!\', \'提示\', {
      confirmButtonText: \'重新登录\',
      type: \'warning\',
      center: true,
      showClose: false,
      showCancelButton: false,
      closeOnClickModal: false,
    })
    .then(() => {
      store.dispatch(\'FedLogOut\')
    })
}
export {
  logout
}

2、将父应用定制的函数传递至子应用

const apps = [
  {
    name: \'admin\',
    entry: "//localhost:9528",
    container:\'#admin\',
    activeRule: genActiveRule(\'/admin\'),
    props: {
      shared,
      emitFnc: childEmit,//将上述的函数传递子应用
    }
  }
]

3、子应用获取并注册到子应用的全局变量中

export async function bootstrap(props) {
  const {emitFnc , shared = SharedModule.getShared() } = props;
  SharedModule.overloadShared(shared);
  Object.keys(emitFnc || {}).forEach(i => {
    Vue.prototype[`$${i}`] = emitFnc[i]
  });
}

4、子应用通过在组件中调用this.$logout(this)即可完成通信。

公共资源共享

项目中存在大量的公共资源，例如公共方法，公共组件，公共UI。在开发的时候不可能每个项目都复制一遍，这样既降低了开发效率，同时项目的体积增大，构建速度变慢。所以对于微前端项目，我们需要定制一套合适的方案将公共资源抽离出来，子应用可以在运行期动态获取到资源并加以使用，就像maven的顶级pom,将公共的jar抽离了出来。

1、这里以公共组件为例，将定义好的公共组件放置主应用的文件夹中并导出，创建一个js文件专门作为公共组件。

import InputEditor from \'./input-editor/src\' //自定义公共组件
import ClipButton from \'./clip-button/src\' //自定义公共组件
const components = [InputEditor,ClipButton];
const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  install,
};

2、同样的，将此文件作为参数传递至子应用。

const apps = [
  {
    name: \'admin\',
    entry: "//localhost:9528",
    container:\'#admin\',
    activeRule: genActiveRule(\'/admin\'),
    props: {
      shared,
      emitFnc: childEmit,
      components: Components//公共组件
    }
  }
]

3、子应用接收到参数后，将组件注册到自身的项目中

export async function bootstrap(props) {
  const {emitFnc ,components, shared = SharedModule.getShared() } = props;
  SharedModule.overloadShared(shared);
  Vue.use(components)  //注册组件
  Object.keys(emitFnc || {}).forEach(i => {
    Vue.prototype[`$${i}`] = emitFnc[i]
  });
}

4、子应用可以在任何组件中使用父应用传递的组件。需要注意的是，使用公共组件的名称要和注册组件的名称保持一致，其他公共js类似。

通过父子间通信，我们大致可以了解到项目中如何实现鉴权，因为前端鉴权是一个难点，在微前端中鉴权方案有很多种，有兴趣的小伙伴可以尝试着去实现自身项目中的鉴权方案。

总结

qiankun，意为统一。通过 qiankun 这种技术手段，让你能很方便的将一个巨石应用改造成一个基于微前端架构的系统，并且不再需要去关注各种过程中的技术细节，做到真正的开箱即用和生产可用。