最近閑暇無(wú)事研究下qiankun，發(fā)現(xiàn)最新的版本的接口與官網(wǎng)的文檔不一致，估計(jì)文檔還沒(méi)梳理，故此在此記錄下。主要更改的是注冊(cè)時(shí)加入了container字段、loader函數(shù)。

• container 微應(yīng)用的容器
• loader 加載函數(shù)(可不傳)，參數(shù)為loading和appContext，(實(shí)際中發(fā)現(xiàn)appContext始終為undefined)，可以控制顯示loading

具體使用詳情見(jiàn)官方倉(cāng)庫(kù)的example

主項(xiàng)目是有VueCLI生成的普通的vue項(xiàng)目

主項(xiàng)目

1、安裝qiankun

yarn add qiankun

2、編寫qiankun.js邏輯，注冊(cè)微應(yīng)用
（由于主項(xiàng)目使用的是默認(rèn)的hash模式路由，故activeRule改為location.hash.startsWith(routerPrefix)）

import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'

function genActiveRule (routerPrefix) {
  return location => location.hash.startsWith(routerPrefix)
}

export default function run () {
  registerMicroApps([
    {
      name: 'react16',
      entry: '//localhost:7100',
      container: '#subapp-viewport',
      loader: () => {},
      activeRule: genActiveRule('#/react16')
    },
    {
      name: 'react15',
      entry: '//localhost:7102',
      container: '#subapp-viewport',
      loader: () => {},
      activeRule: genActiveRule('#/react15')
    }
  ])
  setDefaultMountApp('/react16')

  start()
}

注意由于我們配置的container為#subapp-viewport，故需要在構(gòu)建路由時(shí)，在路由的componet中的template寫入id為subapp-viewport的div

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/react16',
    name: 'Home',
    component: Home
  },
  {
    path: '/react15',
    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')
  }
]

const router = new VueRouter({
  routes
})

export default router

Home.vue中模板加入指定的dom元素

<template>
  <div id="subapp-viewport">
  
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

main.js中引入qiankun.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import runApp from './qiankun'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

runApp()

子應(yīng)用

子應(yīng)用自己隨便新建項(xiàng)目然后按照文檔，導(dǎo)出生命周期鉤子，加入publicPath即可，不然會(huì)導(dǎo)致404。

搞定~