Vue.js - 微前端框架 qiankun 的使用详解（附样例）

一、微前端介绍

1，什么是微前端？

2，使用微前端的好处

3，目前微前端主要的解决方案

二、qiankun 介绍

1，什么是 qiankun？

2，qiankun 主要特性

三、使用样例

1，主应用开发

npm i qiankun -S

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/app1">App1</router-link> |
      <router-link to="/app2">App2</router-link>
    </div>
    <div id="container"/>
  </div>
</template>

（3）然后在 main.js 中注册微应用并 start 即可。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

// 引入 qiankun 组件
import { registerMicroApps, start } from 'qiankun';

// 注册微应用信息
registerMicroApps([
  {
    name: 'hangge-app-1',
    entry: 'http://localhost:9091',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'hangge-app-2',
    entry: 'http://localhost:9092',
    container: '#container',
    activeRule: '/app2',
  }
]);
// 启动 qiankun
start();

• 当然微应用也不是必须要跟路由关联，我也可以选择手动加载微应用的方式：

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'hangge-app-1',
  entry: 'http://localhost:9091',
  container: '#container',
});

2，微应用开发

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

（2）接着修改 main.js 文件，在最顶部引入 public-path.js，导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

import './public-path';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

let instance = null;

// 页面渲染方法
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时就直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

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

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
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 = null;
}

（3）修改 router/index.js，设置路由 base，值和该微应用在主应用那边的 activeRule 是一样的。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/app1/' : process.env.BASE_URL,
  routes
})

export default router

(4）最后编辑项目根目录下的 vue.config.js 文件（如果没有则手动创建一个），修改 webpack 打包，允许开发环境跨域和 umd 打包。

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', //允许开发环境跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

（5）经过上面修改后访问可能会报“error  '__webpack_public_path__' is not defined”错误。这个是 eslint 的问题，webpack_public_path 不是全局变量所导致的。我们在 package.json 文件中 eslintConfig 配置全局变量后重起服务即可解决。

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

3，运行效果