qiankun(微服务)-vue搭建

乾坤微服务需要一个主应用搭配若干子应用。

1.搭建主应用

创建主应用vue项目后，使用$ yarn add qiankun # 或者 npm i qiankun -S 安装乾坤模块，在入口文件main.js中导入乾坤，使用registerMicroApps注册子应用，并开启乾坤微服务。

main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;

// (1)导入乾坤框架
import { registerMicroApps, start } from "qiankun";
// (2)注册乾坤子应用
registerMicroApps([
  {
    name:"sub-application01", //子应用名称
    entry:"//localhost:8001", //子应用入库地址
    container:"#container", //主应用容器
    activeRule:"/sub-application01", //主应用路由匹配规则
    props:{
      token:"sub-application-001"
    } //主应用传递参数
  },
  // {
  //   name:"sub-application02",
  //   entry:"//localhost:8002",
  //   container:"#container",
  //   activeRule:"/sub-application02",
  //   props:{
  //     token:"sub-application-002"
  //   }
  // }
]);

//(3)开启乾坤
start();

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

需要注意的是在主应用app.vue中需要给主应用一个容器用来存放子应用。

app.vue:

<template>
  <div id="app">
    <router-view/>
    <div id="container"></div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  margin: 0;
  padding: 0;
}
</style>

home.vue:

<template>
  <div>
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- 主应用入口 -->
    <div class="enter">
      <router-link class="link" to="sub-application01">子应用1</router-link>
      <router-link class="link" to="sub-application02">子应用2</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  }
}
</script>

<style scoped>
.enter {
  margin: 200px auto;
  width: 500px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
}
.link {
  flex: 1;
  cursor: pointer;
}
</style>

2.搭建子应用

创建子应用vue项目后，在src目录下新建public-path.js，用于修改运行时的 publicPath。

public-path.js:

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

修改子应用入口文件main.js:

// (1)导入public-Path.js
import "./public-path";
import Vue from 'vue';
import App from './App.vue';
import VueRouter from "vue-router";
import routes from './router';

Vue.config.productionTip = false

let router = null;
let instance = null;

//(2)创建子应用渲染函数
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

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

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

// (3)暴露qiankun生命周期
//bootstrap 只会在微应用初始化的时候调用一次
//下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
//通常我们可以在这里做一些全局变量的初始化，比如不会在 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;
}

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

router.js:

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/sub-application01',
    name: 'Home',
    component: Home
  },
]

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

export default routes

vue.config.js:

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    host:"0.0.0.0",
    port:"8001"
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

3.效果图：

 

 

 

 

参考：项目实践 - qiankun (umijs.org)