qiankun子应用学习

qiankun子应用接入文档说明

主应用注册展示

{
    name: 'ztzzpcnomal',//子应用包名
    entry: 'http://192.168.1.174:8082/ztzzPcNomal/', // 子应用地址
    container: '#subapp-viewport',//应用挂载节点
    // loader,
    activeRule: getActiveRule('#/majortask/ztzzPcNomal/') //哈希路由配置，子应用路由前缀
  }

这部分配置需要在添加子应用工程的时候协商添加，后续会考虑弄成配置功能不需要改动代码
qiankun官网地址

子应用路由注册更改

在路由文件加载时添加路由前缀，也即是前一篇的“/majortask/ztzzPcNomal/”，判断是否是在qiankun框架内，是的话添加，不是就不添加，方便子应用独立使用，下面是例子：

let prefix = '/'
if (window.__POWERED_BY_QIANKUN__) {
  prefix = '/majortask/ztzzPcNomal/'
}
const baseRoutes = [
  {
    path: prefix,
    name: '例子',
    component: resolve => require(['@/views/index'], resolve),
    // redirect: '/',
    meta: {
      requireAuth: true, // 是否需要登录
      role: ['admin'] // 角色权限可以访问，功能后续增加
      // icon: 'heart'// 菜单图标
    }
  },
  {
    path: prefix + 'conflict',
    name: '例子',
    component: resolve => require(['@/views/frontView/majortask/components/conflict'], resolve),
    // redirect: '/',
    meta: {
      requireAuth: true, // 是否需要登录
      role: ['admin'] // 角色权限可以访问，功能后续增加
      // icon: 'heart'// 菜单图标
    }
  }
]

接下来要去更改路由注册，更改vue的挂载节点，判断在qiankun框架内的需要挂载到主应用的虚拟节点下，不在的就正常挂载，更改main.js，
Vuex在主应用和子应用间的继承集成方式方法
下面是例子：

import './public-path'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
// import router from './router'
import routes from '@/router/_base'
import microStore from './store'
import './assets/font/iconfont/iconfont.css'
// 引入vue全局方法
import base from './base.js'
import * as echarts from 'echarts'
Vue.use(base)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
let router = null
let instance = null
function render (props = {}) {
  const { container } = props
  // let store = props.store
  let store
  router = new VueRouter({
    // base: window.__POWERED_BY_QIANKUN__ ? '/app1' : '/',
    // mode: 'history',
    routes
  })
  if (window.__POWERED_BY_QIANKUN__) {
    store = props.store
    Vue.prototype.microStore = microStore
    router.beforeEach((to, from, next) => {
      if (!to.path.includes('/majortask/ztzzPcNomal')) {
        console.log('/majortask/ztzzPcNomal' + to.path)
        next({
          ...to,
          path: '/majortask/ztzzPcNomal' + to.path
        })
      } else {
        next()
      }
    })
  } else {
    store = microStore
  }
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}
export async function bootstrap () {
  console.log('vue app bootstraped')
}
export async function mount (props) {
  // console.log('挂载 vue2')
  render(props)
}
export async function unmount () {
  // console.log('卸载载 vue2')
  instance.$destroy()
  instance = null
  router = null
}

上文中需要引入的public-path.js，代码如下：

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

配置微应用的打包工具

要挂载到主应用，需要在vue.config.js文件中进行配置更改，

const packageName = require('./package.json').name;
module.exports = {

configureWebpack: {
output: {
library: 'ztzzPcNomal', //子应用包名
libraryTarget: 'umd',// 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${packageName}`,
},
},
};

还要配置子应用的跨域：

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },

注意事项

1、子应用路由必须挂载前缀；

2、路由是以著应用为主，所以路由传参可以直接使用；

3、vuex、cookie是共享主应用的，子应用中可以直接使用；

4、虚拟节点的获取

5、弹框挂载的时候需要对节点挂载的对象切换成虚拟节点内才能更改样式

6、当前平台使用的适配方案是根据根节点的字体大小进行适配，根节点字体在1440下是16px,在其他尺寸的时候是14px,子应用需要统一适配方案，否则就考虑使用iframe嵌套；

7、后续需要对接业务应用的都会提供平台代码源码以及通用流程代码例子，只可拉取查看，应用对接需要找相应技术人员，添加子应用引用，子应用的改造由应用方自行完成，后续添加应用模块实现功能化后将不再提供平台代码