乾坤qiankun

先来先贴一个官网地址 (opens new window)

搭建一个测试demo用以自己学习qiankun微前端代码地址 (opens new window)

本示例代码仅供学习用途，仅代表了演示qiankun微前端的基本功能。

基座主应用：vue2.x + vue-router+ qiankun(2.10.7)

子应用：vue3.x(vue-cli)

qiankun的微前端只需要在主应用中加载使用框架，在注册子应用是填写子应用运行地址即可，主应用会加载该地址下的资源文件，当然这个东西涉及跨域问题。活不多说开始编码吧

!!!!: 要在微前端项目使用history路由模式

主应用配置

1. 在主应用中qiankun

npm install qiankun -S

2. 在主应用中注册子应用, 创建register-micro-app.js

// step 1: 
/**
  registerMicroApps：注册子应用
  start：开启qiankun
  initGlobalState: 初始化全局state
*/
import { registerMicroApps, startm, initGlobalState } from 'qiankun';

/*
  name: 'qiankunvue3', // 子应用的名字， 该name值需和webpack的output中library字段的值保持一致，见下文
  entry: "//localhost:7101", // 子应用的入口，需要和子应用中运行地址的保持一致
  activeRule: '/vue3', //  匹配的规则, 也就是说当在主应用中访问/vue3开头的路由时，就会记载子应用的资源文件
  props: {}, // 用于往子应用传值
*/

// step 2: 定义子应用列表
const microApp = [
  {
    name: 'qiankunvue3',
    entry: "//localhost:7101",
    activeRule: '/vue3',
    props: {}
  },
  {
    name: 'qiankunvue2',
    entry: "//localhost:7201",
    activeRule: '/vue2',
    props: {}
  },
]
// step 3: 注册子应用
export function initMicroApp(){
  registerMicroApps(microApp，{
    beforeLoad: (app)=>{
      console.log('Before load micro app: ', app.name);
    },
  })
  // step 4: 开启乾坤
  start()
}
/**
	registerMicroApps(AppParams, LifeCycleFn)
	AppParams: 子应用参数可以为对象或者数组对象
	LifeCycleFn：生命周期函数(可选)
*/

3. 在main.js引入register-micro-app.js并调用initMicroApp方法

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { initMicroApp, } from "***/register-micro-app"
Vue.use(VueRouter)
const router = new VueRouter({
  mode: "history", // 路由模式要选择history模式
})
Vue.config.productionTip = false
initMicroApp()
new Vue({
  render: h => h(App),
  router,
}).$mount('#container')

子应用配置vue3.x

1. 创建项目

此处省略。。。

2. 修改vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devServer: {
      port: 7101, 
      headers: { // 因为跨域问题，要让主应用访问子应用的资源文件，开头有提及
        "Access-Control-Allow-Origin": "*",
      },
    },
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: `qiankunvue3`,
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: "umd",
      chunkLoadingGlobal: `webpackJsonp`, //这个是webpack5 更新的属性 之前是jsonpFunction
    },
  },
});

3. 将路由模式改为history模式

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: () => import("../views/AboutView.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(`/vue3`), // `/vue3`是为了保持和在主应用中定义的activeRule保持一致
  routes,
});

export default router;

4. 在main.js中导出qiankun的异步方法

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./patch-path";

function render(props) {
  const { container } = props;
  const app = createApp(App);
  app
    .use(store)
    .use(router)
    .use(store)
    .mount(container ? container.querySelector("#app") : "#app");
}
// 微前端项目也可以独立运行，当独立运行时判断window.__POWERED_BY_QIANKUN__是否存在用以区分
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}
/**
 * bootstrap ： 在微应用初始化的时候调用一次，之后的生命周期里不再调用
 */
export async function bootstrap() {
  console.log(" vue3 app bootstraped");
}

/**
 * mount ： 在应用每次进入时调用
 */
export async function mount(props) {
  console.log("mount vue3", props);
  render(props);
  props.setGlobalState({ token: 1212 });
}

/**
 * unmount ：应用每次 切出/卸载 均会调用
 */
export async function unmount() {
  createApp(App).unmount();
}

// 到这里就完成了子应用的配置了