Vue+qiankun(乾坤)搭建微前端(主应用+子应用)

基于vue-cli + vue-router + qiandun(乾坤)搭建微前端(主应用与子应用)，下面是具体的搭建步骤，也可以下载我的demo：vue-qiankun来测试。

第一步：搭建应用

Vue CLI搭建两个应用。主应用：main-app，子应用：sub-app-vue，两个应用工程目录是同级的。

同时需要安装vue-router，建议创建应用的时候使用Vue CLI图形化界面创建。

第二步：注册应用

主应用main-app的main.js中：

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

// 导入qiankun.js
// import {registerMicroApps,setDefaultMountApp,start} from "qiankun";
import {registerMicroApps,start} from "qiankun";
Vue.config.productionTip = false

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

// 注册子应用
registerMicroApps([
  {
    name: 'vue app',            // 子应用名称
    entry: '//localhost:8081',  // 子应用入口
    container: '#container',    // 子应用所在容器
    activeRule: '/vue',         // 子应用触发规则（路径）
  },
]);

// 启动默认应用
// setDefaultMountApp('/vue')

// 开启服务
start()

子应用将挂在到#container，如果setDefaultMountApp('/vue')开启之后，当启动后会默认跳转到子应用。

主应用App.vue加入：

<template>
  <div id="app">
    <div class="nav-container">
      <p class="nav">主应用导航：<a href="/">Home</a>
        <a href="/about">About</a>
        <!-- 子应用 vue app -->
        <a href="/vue">Vue</a>（a标签跳转）</p>
      <p class="nav">主应用导航：
        <router-link :to="{name: 'Home'}">Home</router-link>
        <router-link :to="{name: 'About'}">About</router-link>
        <!-- 子应用 vue app -->
        <router-link :to="{path: 'vue'}">Vue</router-link>（router-link跳转）
      </p>
    </div>
    <!-- .nav-container -->


    <!-- 主应用容器 -->
    <router-view></router-view>


    <!-- 子应用容器 -->
    <div id="container"></div>


  </div>
  <!-- #app -->
</template>

子应用sub-app-vue的main.js中：

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';

Vue.config.productionTip = false;

let router = null;
let instance = null;

function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: '/vue',
    mode: 'history',
    routes,
  });

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

// webpack打包公共文件路径
/*eslint no-undef: 0*/
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 生命周期
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  // storeTest(props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

第三步：启动应用

先启动主应用：

cd main-app
npm run serve

等待主应用启动之后在启动子应用：

cd sub-app-vue
npm run serve

参考资料

https://www.imooc.com/article/304768
https://zhuanlan.zhihu.com/p/196428171
https://qiankun.umijs.org/zh/guide