微前端-qiankun配置

基座配置

1.添加一个跳转到子应用的 router-link 的标签，也可以使用 qiankun 跳转方法去跳转页面

2.需要给你的子项目添加挂载的容器， 比如我把 vue 子项目 挂载到

3.给基座（父级项目）安装 qiankun 依赖：yarn add qiankun -S

4.在 main.js 中引入 qiankun： import { registerMicroApps, start } from “qiankun”;

5.定义 子应用 数组 数据

import { registerMicroApps, start } from "qiankun";

const apps = [
  {
    name: "vueApp", // 应用名称
    entry: "//localhost:10000", // 加载这个html文件
    container: "#vue", // 子应用挂载到基座的容器
    activeRule: "/vue", // 激活路径
    props: {
      a: 1,
    },
  },
  {
    name: "reactApp",
    entry: "//localhost:20000",
    container: "#react",
    activeRule: "/react",
  },
];

registerMicroApps(apps); // 注册应用
start(); // 开启

Vue 项目配置

1.router 文件修改 base: ‘/vue’

2. 在 main.js 中 必须导出三个方法

let instance = null; // 用于保存实例， 方便卸载子应用

function render(props) {
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#app"); // 子应用还是挂载到自己的容器上 基座会拿到挂载后的html文件，然后插入进去
}

//  确保子应用可以正常独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 如果子应用和基座项目的访问ip不同，qiankun可以动态的改变子应用的ip
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 子组件协议 （协议其实就是基座和子应用进行沟通的规则，在这里就是子应用必须导出这三个方法）
export async function bootstrap(props) {
  console.log(props.a); // 1
  // 启动
}

export async function mount(props) {
  // 挂载
  render(props);
}

export async function unmount(props) {
  // 卸载
  instance.$destroy();
}

3.配置 vue.config.js 使其子项目导出一个 lib 库

module.exports = {
  configureWebpack: {
    output: {
      library: "vueApp", // 库名
      libraryTarget: "umd", // js规范
    },
    devServer: {
      port: 10000, // 开发环境启动端口号
      headers: {
        // 开发环境允许跨域
        "Access-Control-Allow-Origin": "*",
      },
    },
  },
};

react 项目配置

1.因为需要写一些 webpack 的配置，所以需要安装一个插件：yarn add react-app-rewired -D

1.1 需要更改一下命令(start\build 都需要改一下)：react-app-rewired start、：react-app-rewired build

2. 和 Vue 项目一样，先导出三个方法，如下：

3. 封装一个 render 函数

4. 需要在 unmount 中卸载应用

5. 让本地环境可以正常运行需要添加开发环境的 render 函数的执行

6. 如果子应用和基座项目的访问 ip 不同，qiankun 可以动态的改变子应用的 ip

//  5. 让本地环境可以正常运行需要添加开发环境的render函数的执行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 6. 如果子应用和基座项目的访问ip不同，qiankun可以动态的改变子应用的ip
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 3. 封装一个 render 函数
function render() {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
}

// 2.导出下面这三个方法
export async function bootstrap(props) {
  console.log(props.a); // 1
  // 启动
}

export async function mount(props) {
  // 挂载
  render(props);
}

export async function unmount(props) {
  // 4. 卸载
  ReactDOM.unmountComponentAtNode(document.getElementById("root"));
}