关于javascript:qiankun微应用项目实践

原理：

主利用某个div上面挂载的是子利用的html文件。

子利用注册：

首先，在finder中装置qiankun工具包。

npm i qiankun -S

而后，另起一个appRegister.js, 用于写子利用挂载。
子利用挂载次要用到了 qiankun 包中的 registerMicroApps 和 start 办法。上面是挂载微利用时的配置信息：

import { registerMicroApps, start, runAfterFirstMounted, initGlobalState } from "qiankun"
//查看路由
const checkMicroUrl = (location, urlList) => {
  let url = location.hash.indexOf("?") != -1 ? location.hash.split("?")[0] : location.hash // 减少路由带query查问参数判断
  const routerName = url.substring(2)
  return urlList.includes(routerName)
}

const config = [{
name: 'activity', 
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: () => {
    return checkMicroUrl(location, ['myActivity', 'ourActivity'])
    },
  }
]
registerMicroApps(
  config,
  {
    beforeLoad: [
      app => {
        
      }
    ],
    beforeMount: [
      app => {
        
      }
    ],
    afterUnmount: [
      app => { 
        
      }
    ]
  }
)


/**
* Step3 启动利用
*/
start()

接着，在finder的main.js文件中引入 appRegister.js

import './utils/appRegister.js'

子利用挂载：

找到挂载子利用的组件，加一个div，id是 subapp-viewport，用来挂载子利用

比方我的项目中，子利用挂载到home组件下：
<template>
  <div class="wrap-all">
    <div class="wrapper">
      <left-nav></left-nav>
      <router-view v-if="!$route.meta.isMicroApp"></router-view>
      <div v-show="$route.meta.isMicroApp" id="subapp-viewport"> </div>
    </div>
  </div>
</template>

主利用中路由：

{
        path: '/myActivity', //匹配微利用跳转
        name: 'activity',
        component: import('@/components/home.vue'),
        meta: {
          isMicroApp: true
        }
      },

这样就配置好了主利用，当拜访的是https://test.kk.com/#/myActivity时，就会命中微利用，#subapp-viewport的div里就会渲染子利用

子利用配置：

从新创立一个空的vue我的项目，在其main.js顶部引入qiankun官网须要引入的public-path.js文件

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

main.js中定义qiankun的mount钩子，渲染子利用

/**
* 利用每次进入都会调用 mount 办法，通常咱们在这里触发利用的渲染办法
*/
export async function mount() {
  render(props);
}

子利用的是用vue-cli构建的，批改vue.config.js的configureWebpack项

  // 自定义webpack配置
  configureWebpack: {
    output: {
      // 把子利用打包成 umd 库格局
###       // const { name } = require('./package'); name是package.json中定义的
      library: `${name}`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },

以上是用qiankun挂载子利用后，本地开发的配置，前面会讲一下：
1，主利用和子利用如何传参
2，如何把qiankun公布到测试和生产环境
3，公布测试和生产时踩的坑