qiankun.js应用

说明：本文仅对qiankun.js应用的记载，具体术语请自行搜索。

qiankun.js =>qiankun - qiankun

一、简介qiankun应用

         微前端，之前一直都有简单了解过微服务，大概就是N个类型的服务都注册到主要服务上，然后就各自管理即可。而后期又发展了微服务，前端的微服务简单来说就是，【子应用】（N个站，或者应用，或者模块）都注册到一个【父应用】上，然后各自管理，开发即可，每个子用应又可以是独立的，也不用管子应用到底是用什么开发，总之最后对接注册到父应用上即可。

举个例子：

我们公司现在有已开发的系统：系统1（jquery+js），系统2（vue.js），系统3（react.js）,公司发展，现在需要将三个系统整合成一个系统。如何做呢？如下图

1 主应用（父应用，即入口）窗口

2 子应用-vue.js 窗口

3 子应用-react 窗口（注意react仅代表第二个应用，请勿略实际内容）

说明：

a.上面三图是我搭建的qiankun(以下称为QK)，第一张为主图，第二张为子应用1，第三张为子应用2，三个应用通过上方菜单切换（实际中，你的父应用可以是所有菜单，或者按模块加载等）

b.每个应用也可以独立打开，注意红色区域，如下图，这么做的目的是每个子应用开发人员可以针对自己的项目进行开发，实际中你可以将公共的信息区分一下即可，比如用户显示等信息，合在一起时再通过父去显示即可

 

二、搭建

1 准备工具：三个空白项目，并默认安装ELEMENT-UI（可选）

2 父应用配置

快速上手 - qiankun

1. 父应用中安装qiankun包：npm i qiankun -S
2. 配置父应用的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'

Vue.use(ElementUI)
Vue.config.productionTip = false

import { registerMicroApps, start } from 'qiankun'

//子应用注册信息
const apps = [
  {
    name: 'vueApp',
    entry: '//localhost:10000',
    container: '#vue',
    activeRule: '/vue',
    props: { a: 1 }, //父应用传值
  },
  {
    name: 'reactApp',
    entry: '//localhost:10100',
    container: '#react',
    activeRule: '/react',
  },
]

registerMicroApps(apps)
start({
  prefetch: false, //取消预加载
})

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

3 配置【子应用01】

1. 子应用不需要安装qiankun.js
2. 配置main.js
3. 修改vue.config.js
4. 修改router.js，路由访问规则

 main.js

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

Vue.config.productionTip = false

let instance = null

function render(props) {
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount('#app') //默认挂载自己的HTML，基座
}

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

if (!window.__POWERED_BY_QIANKUN__) {
  // 如果是独立运行此项目，则直接运行
  render()
}

//子组件的协议
export async function bootstrap(props) {}

export async function mount(props) {
  console.log(props)
  render(props)
}

export async function unmount(props) {
  instance.$destroy()
}

vue.config.js

module.exports = {
  devServer: {
    port: 10000,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
    },
  },
}

router.js

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: '/vue', //修改路由访问规则
  routes,
})

export default router

注意，base中的根路由，要与父应用中的路由保持一致，如若不一致，就会出现路由访问不正确，从而无法显示你的页面

***********子应用路由配置***********

const router = new VueRouter({

  mode: 'history',

  base: '/vue', //修改路由访问规则

  routes,

})

***********父应用注册信息***********

const apps = [

  {

    name: 'vueApp',

    entry: '//localhost:10000',

    container: '#vue',

    activeRule: '/vue',

    props: { a: 1 }, //父应用传值

  }...

]

到此，配置结束，第二个子应用与上面配置方法一样，

注意：

• 路由信息配置：【base: '/vue'】【activeRule: '/vue',】两项的配置即可。
• vue.config.js配置：

  configureWebpack: {

      output: {

        library: 'reactApp',

        libraryTarget: 'umd',

      },

    },

        

最后一部，将三个应用全部启动，打开父应用的地址，即可出现开头的内容，本地化配置结束。