微前端 quankun + vue

micro.jpeg

前言

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

quankun 微前端架构

quankun + vue 前端微应用化实现

案例代码中有详细注释说明
github下载地址 front-micro-app

项目结构

├── portal  主应用
├── product  产品业务子应用
├── trade    订单业务子应用

主应用

1、安装 qiankun

yarn add qiankun # 或者 npm i qiankun -S

2、在主应用中注册微应用

import { registerMicroApps, start ,setDefaultMountApp} from 'qiankun';

/**
 * [基于路由配置]
 * 通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能。
 * registerMicroApps(apps, lifeCycles?)
 */
registerMicroApps(
  // apps - Array - 必选，
  [
    {
      name: 'product', // 微应用名称，确保微应用唯一
      entry: '//localhost:7702', // 微应用入口地址
      container: '#container', // 微应用的容器节点的选择器或者 Element 实例
      activeRule: '/product', // 微应用的激活规则 （支持直接配置字符串或字符串数组，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。）
    },
    {
      name: 'trade',
      entry: '//localhost:7703',
      container: '#container',
      activeRule: location => location.pathname.startsWith('/trade')
    },
  ],

  // 微应用的一些注册信息 lifeCycles - LifeCycles - 可选，全局的微应用生命周期钩子
  {
    beforeLoad: app => console.log('before load', app.name),
    beforeMount: [
      app => console.log('before mount', app.name),
    ],
  }
);

// 设置主应用启动后默认进入的微应用
setDefaultMountApp('/product');

/**
 * prefetch - boolean | 'all' | string[] | (( apps: RegistrableApp[] ) => { criticalAppNames: string[]; minorAppsName: string[] }) - 可选，是否开启预加载，默认为 true。
 * 配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源，配置为 'all' 则主应用 start 后即开始预加载所有微应用静态资源。
 * 配置为 'all' 则主应用 start 后即开始预加载所有微应用静态资源。
 * 配置为 string[] 则会在第一个微应用 mounted 后开始加载数组内的微应用资源
 * 配置为 function 则可完全自定义应用的资源加载时机 (首屏应用及次屏应用)
 * sandbox - boolean | { strictStyleIsolation?: boolean } - 可选，是否开启沙箱，默认为 true。
 * 当配置为 { strictStyleIsolation: true } 表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
 * singular - boolean | ((app: RegistrableApp) => Promise); - 可选，是否为单实例场景，默认为 true。
 * fetch - Function - 可选，自定义的 fetch 方法。
 * getPublicPath - (url: string) => string - 可选
 * getTemplate - (tpl: string) => string - 可选
 */
start({
  singular: true
});

子应用

1、main.js 导出相应的生命周期钩子

/**
 * 微应用静态资源一定要支持跨域
 * qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量
 * runtime publicPath 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。
 */
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

let router = null;  // 路由
let instance = null; // vue实例

// 微应用渲染方法
function render() {
    router = new VueRouter({
        base: window.__POWERED_BY_QIANKUN__ ? '/product' : '/',
        mode: 'history',
        routes,
    });

    router.beforeEach((to, from, next) => {
      const title = to.meta && to.meta.title;
      if (title) {
        document.title = title;
      }
      next();
    });

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

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

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('产品微应用初始化 bootstrap');
}

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

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

/**
 * 可选生命周期钩子，仅使用 loadMicroApp(手动加载) 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

2、vue.config.js 配置微应用的打包工具

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};

The end

Thank you for reading
如果觉得文章对你有所帮助，点个赞吧