qiankun使用文档

基于vue的主应用+vue微应用+react微应用

一、qiankun主应用（vue）

1.安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2.注册微应用并启动（参考官方文档）

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { registerMicroApps, start } from "qiankun";

Vue.config.productionTip = false;

registerMicroApps([
  {
    name: "qiankun_vue", // 为子应用名称，与子应用中package.json中的name一致
    entry: "//localhost:8081", // 入口地址，子应用的ip地址
    container: "#vue", // 加载子应用的容器，在app.vue中创建--<div id="vue"></div>--
    activeRule: "/vue", // 匹配子应用的激活路径
    props: { a: 1 }, //主应用传值给子应用
  },
  {
    name: "qiankun_react",
    entry: "//localhost:8082",
    container: "#react",
    activeRule: "/react",
  },
]);
// 启动 qiankun
start();

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

3.在 App.vue 中创建路由加载子应用的容器

  	<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/vue">vue子应用</router-link> |
      <router-link to="/react">react子应用</router-link>
    </div>
    <router-view />
    <!-- 子应用挂在的容器 -->
    <div id="vue"></div>
    <div id="react"></div>

二、微应用（vue）

1.在 src 目录新增 public-path.js（官方文档）

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

2.入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

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文件中index.js

const router = new VueRouter({
  mode: "history",
  base: "/vue",
  routes,
});

3.打包配置修改（vue.config.js）（设置端口号）

const { name } = require("./package");
module.exports = {
  devServer: {
    port: 8081,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

三、微应用（react）

1.在 src 目录新增 public-path.js(官方文档)

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

2.index.js 页面根据官方文档配置即可

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

3.“webpack_public_path”报错，修改 package.json 文件如下：

     "eslintConfig": {
        ...,
        "globals": {
            "__webpack_public_path__": true
        }
    },

4.修改 webpack 配置

1> 安装插件 npm install react-app-rewired
2> 根目录中创建一个config-overrides.js修改默认的一些配置（如下代码）

const { name } = require("./package");

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = "umd";

    return config;
  },

  devServer: (_) => {
    return function (proxy, allowedHost) {
      const config = _(proxy, allowedHost);
      config.headers = {
        "Access-Control-Allow-Origin": "*",
      };
      return config;
    };
  },
};

5.修改 package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  },

6.根目录创建.env 文件

设置默认端口号

PORT = 8082
WDS_SOCKET_PORT = 8082