qiankun微服务vue2.0

主应用下载yarn add qiankun 子应用不用下载
（主应用会根据自己的配置查找对应的端口）

主应用

1.main.js引入

import { registerMicroApps, start} from 'qiankun';
registerMicroApps([
  {
    name: 'vueApp',			// 自定义的微应用名称
    entry: 'http://localhost:100/',	// 访问子应用的域名和端口号
    container: '#container',	// 指定子应用渲染的容器（须在页面中提前声明）
    props:{"name":"liuyianbo"},
    activeRule: '/childeren/clock',	// 匹配不同子应用的路由规则
  }
]);

start();

2.路由router.js里面的路由地址和上面的activeRule的地址一样

3.把对应的dom id写在对应的组件里面

子应用

main.js中

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)
// 子应用主要配置
let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/' : '/',
    mode: 'history',
    routes,
  });

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

console.log(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,window.__POWERED_BY_QIANKUN__,"window.__POWERED_BY_QIANKUN__")
// qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量，我们需要做的是在微应用的 main.js 的顶部添加如下代码：
if (window.__POWERED_BY_QIANKUN__) { 
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  } // or此处我们也可以在 src 目录新增 public-path.js，在main.js中引入该文件（import './public-path';），内部代码内容和上述一样。
  
  //如何独立运行微应用
  if (!window.__POWERED_BY_QIANKUN__) { //不是在qiankun环境下的话，独立运行
	render();
  }
  
  /**
   * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
   * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
   */
  export async function bootstrap() {
	console.log('vue app bootstraped');
  }
  
  /**
   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
   */
  export async function mount(props) { //props含有主应用传递进来的数据
    console.log(props,"props","mount",window.__POWERED_BY_QIANKUN__)
	render(props)
  }
  
  /**
   * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
   */
  export async function unmount(props) {
    console.log(props,"props","unmount")
    render(props)
  }
  
  /**
   * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
   */
  export async function update(props) {
	console.log('update props', props);
  }

在vue.config.js中设置端口号以及暴露出对应的端口，让主应用访问

const path = require('path')
module.exports = {
    devServer:{
        port:100, //设置微应用端口号
        headers:{
            'Access-Control-Allow-Origin':'*'//允许跨域
        }
    },
     // 打包相对路径用于子应用访问静态资源
    publicPath: 'http://192.168.1.38:100/',
     //webpack4.0配置
    configureWebpack:{
        output:{
            library: 'vueApp',
    		libraryTarget: 'umd',
    		jsonpFunction: 'webpackJsonp_vueApp',
        },
        resolve: {
            alias: {
              '@@': path.resolve(__dirname, 'src/assets/img'),
              'views': path.resolve(__dirname, 'src/views'),
              '_c': path.resolve(__dirname, 'src/components')
            }
          }
        
    }
}

主应用给子应用传递数据

我这里写在mian.js里面 可以直接把store的数据给他

import { initGlobalState} from 'qiankun';
//initGlobalState传递数据
initGlobalState({name:"陈小盟",messgae:"我说子应1asdasdaacs11111用"})
//更新传递的数据 setGlobalState 
initGlobalState({}).setGlobalState({name:"liuyianbo",messgae:"我说子应用"})

子应用接收数据