关于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，公布测试和生产时踩的坑