qiankun+vue2.0微前端入门

前言

使用qiankun微前端架构有一段时间了，今天好友菲某在架构中遇到了若干问题，我在协助处理之后，决定将此次架构梳理一下，以便于未来再处理的时候有迹可循。

问题梳理

微前端主应用，子应用配置问题
主应用调取子应用跨域问题
挂载Dom节点冲突问题

qiankun主应用，子应用配置

在qiankun框架文档中有足够详细的配置教程，但是为了方便梳理，此处再次复述。

首先主应用配置：

import { loadMicroApp, registerMicroApps, start } from 'qiankun'
// 此处为使用路由导航配置
registerMicroApps([
  {
    name: 'vue app', // app name registered
    entry: '//localhost:3000',
    container: '#yourContainer',
    activeRule: '/qiankun-child',
  },
]);
// 此处为不使用路由导航配置
loadMicroApp({
   name: 'vue app',
   entry: '//localhost:3000',
   container: '#yourContainer',
});
start();

主应用的配置到此即可，后续若有其他深入研究，会在其他博文说明。

子应用配置：

子应用的配置中需要首先在src中增加public-path.js文件，内容如下：

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

其次，通过判断window.__POWERED_BY_QIANKUN__确定是否进行子页面的独立渲染。

若window.__POWERED_BY_QIANKUN__存在，则进行后续qiankun挂载函数的抛出，各个函数如下：

// 初始化子应用
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
// 挂载子应用
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
// 卸载子应用
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

主应用调取子应用跨域

在文档中有介绍子应用的vue.config.js配置，内容如下：

const { name } = require('./package');
module.exports = {
  devServer: {
    // 此处配置是解决主应用调取子应用跨域问题的
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

主应用/子应用挂载dom冲突问题

主应用以及子应用挂载dom冲突的问题，文档中建议更改主应用或者子应用的挂载ID

结语

在此简单记录此次部署qiankun框架微服务的过程，后续若有其他内容会持续更新