跳到主要内容

微前端(qiankun)集成

说明：此文档是 jeecgBoot-vue3作为主应用模式，其他项目作为子应用使用。

vue3-admin-jeecg默认已经集成qiankun,详细使用说明参考 qiankun官网,集成步骤如下

1.安装qiankun​

在前端项目外层建立qiankun-jeecg 文件夹 把vue3-admin-jeecg拷贝到此文件夹下如下图

进入qiankun-vue3-jeecg/vue3-admin-jeecg 目录下执行如下命令

pnpm add qiankun

2.在主应用中注册微应用​

  • 把 src/qiankun/apps.ts 文件注释的代码放开
/**
 *微应用apps
 * @name: 微应用名称 - 具有唯一性
 * @entry: 微应用入口.必选 - 通过该地址加载微应用，
 * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
 * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
 */
//子应用列表
const _apps = [];
for (const key in process.env) {
    if (key.includes('VUE_APP_SUB_')) {
        const name = key.split('VUE_APP_SUB_')[1];
        const obj = {
            name,
            entry: process.env[key],
            container: '#content',
            activeRule: name,
        };
        _apps.push(obj)
    }
}
export const apps = _apps;
  • 把 src/qiankun/state.ts 文件注释的代码放开
/**
 *公共数据
 */
import {initGlobalState} from 'qiankun';
import {store} from '/@/store';
import {router} from '/@/router';
import { getToken } from '/@/utils/auth';
//定义传入子应用的数据
export function getProps() {
    return {
        data: {
            publicPath:'/',
            token: getToken(),
            store,
            router
        }
    }
}

/**
 * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
 * @param state 主应用穿的公共数据
 */
export function initGlState(info = {userName: 'admin'}) {
    // 初始化state
    const actions = initGlobalState(info);
    // 设置新的值
    actions.setGlobalState(info);
    // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
    actions.onGlobalStateChange((newState, prev) => {
        // state: 变更后的状态; prev 变更前的状态
        console.info("newState", newState)
        console.info("prev", prev)
        for (const key in newState) {
            console.info("onGlobalStateChange", key)
        }
    });
}
  • 把 src/qiankun/index.ts 文件注释的代码放开
/**
 * qiankun配置
 */
import {registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler} from 'qiankun';
import {apps} from './apps';
import {getProps, initGlState} from './state';
/**
 * 重构apps
 */
function filterApps() {
    apps.forEach((item) => {
        //主应用需要传递给微应用的数据。
        item.props = getProps();
        //微应用触发的路由规则
        item.activeRule = genActiveRule('/' + item.activeRule);
    });
    return apps;
}

/**
 * 路由监听
 * @param {*} routerPrefix 前缀
 */
function genActiveRule(routerPrefix) {
    return location => location.pathname.startsWith(routerPrefix);
}

/**
 * 微应用注册
 */
function registerApps() {
    const _apps = filterApps();
    registerMicroApps(_apps,
        {
            beforeLoad: [
                loadApp => {
                    console.log('before load', loadApp);
                }
            ],
            beforeMount: [
                mountApp => {
                    console.log('before mount', mountApp);
                }
            ],
            afterMount: [
                mountApp => {
                    console.log('before mount', mountApp);
                }
            ],
            afterUnmount: [
                unloadApp => {
                    console.log('after unload', unloadApp);
                }
            ]
        });
    // 设置默认子应用,与 genActiveRule中的参数保持一致
    // setDefaultMountApp();
    // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
    runAfterFirstMounted(() => console.log('开启监控'));
    // 添加全局的未捕获异常处理器。
    addGlobalUncaughtErrorHandler(event => console.log(event));
    // 定义全局状态
    initGlState();
    //启动qiankun
    start({});
}
export default registerApps;
  • 放开 src/layouts/default/content/index.vue 文件中 onMounted 注释的代码（引入qiankun注册文件）
<div id="content" class="app-view-box" v-if="openQianKun=='true'"></div>
onMounted(() => {
   //注册openQianKun
    if (openQianKun=='true') {
        if (!window.qiankunStarted) {
            window.qiankunStarted = true;
            registerApps();
        }
    }
});
  • 设置全局控制开关 .env 文件中qiankun全局控制开关设置true
VITE_GLOB_APP_OPEN_QIANKUN=true
  • 设置子应用入口地址 .env.development 文件中设置开发环境的子应用入口地址。（路由地址和 VITE_APP_SUB_ 后面保持一致，如下面qiankun-app）
#微前端qiankun应用,命名必须以VITE_APP_SUB_开头,qiankun-app为子应用的项目名称,也是子应用的路由父路径
VITE_APP_SUB_qiankun-app = '//localhost:8001/qiankun-app'。

.env.production 文件设置生产环境应用入口地址。（路由地址和 VITE_APP_SUB_ 后面保持一致，如下面qiankun-app）

#微前端qiankun应用,命名必须以VITE_APP_SUB_开头,qiankun-app为子应用的项目名称,也是子应用的路由父路径
VITE_APP_SUB_qiankun-app = '线上地址/qiankun-app'
  • src/main.ts 添加 registerApps()

+ import registerApps from '/@/qiankun/index';

async function bootstrap() {
+  registerApps();
}
  • 修改打包输出位置 修改vue3-admin-jeecg/build/constant.ts中outputDir内容定义，将打包内容输出到qiankun-vue3-jeecg文件夹下main目录下
export const OUTPUT_DIR = '../dist/main';
  • 添加全局启动打包文件(package.json) 存放位置如下图

文件内容如下

{
  "name": "qiankun-jeecg",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "install": "npm-run-all install:* ",
    "install:main": "cd ant-design-jeecg-vue && npm install",
    "install:sub01": "cd jeecg-app-1 && npm install ",
    "start": "npm-run-all start:* ",
    "start:main": "cd ant-design-jeecg-vue && start cmd /k npm run serve",
    "start:sub01": "cd jeecg-app-1 && start cmd /k npm run serve",
    "build": "npm-run-all build:* ",
    "build:main": "cd ant-design-jeecg-vue && npm run build",
    "build:sub01": "cd jeecg-app-1 && npm run build"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

3 子应用改造​

  • 在子应用src目录下新建public-path.js文件内容如下
//用于修改运行时的 publicPath
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
  • 修改main.js文件
function render(props = {}) {
    const {container} = props;
    instance = new Vue({
        router,
        render: (h) => h(App),
    }).$mount(container ? container.querySelector('#app') : '#app');
}

/**
 * 非qiankun独立启动
 */
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap(props) {
  common.setCommonData(props)
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  common.initGlState(props)
  render(props);
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
    common.setCommonData(props)
    common.initGlState(props)
}

  • 打包配置修改（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}`,
    },
  },
};
  • 子应用vue.config.js完整配置参考如下内容
const path = require("path");
const packageName = require("./package.json").name;
const node_env = process.env.NODE_ENV === "production";
// const baseUrl = process.env.VUE_APP_BASE_URL;
const baseUrl = "/";
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  //打包输入目录
  outputDir: `../dist/${packageName}`,
  publicPath: node_env ? baseUrl : "/",
  assetsDir: "static",
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    output: {
      library: `${packageName}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${packageName}`,
    },
  },
  devServer: {
    hot: true,
    disableHostCheck: true,
    host:'localhost',
    port: 8092,
    headers: {
      "Access-Control-Allow-Origin": "*", // 主应用获取子应用时跨域响应头
    },
  },
};

效果：​