vue2项目下配置qiankun

1、新建名叫project-v3-qiankun的文件夹，用来放整个项目

npm init
npm i npm-run-all@4.1.5  -D

2、新建三个vue项目
main-app => 主项目
b-child => 子项目B
c-build => 子项目C

npx vue create main-app
npx vue create b-build
npx vue create c-build

3、主项目安装和配置
安装

npm i qiankun@2.4.0
npm i vue-router@3.2.0 vuex@3.4.0

代码
qiankun.js

import {
  registerMicroApps,
  start
} from 'qiankun'

export const useQiankun = () => {
  const apps = [
    {
      name: 'b-child', // 必选，微应用的名称，微应用之间必须确保唯一
      entry: 'http://localhost:8022', // - 必选，微应用的入口
      container: '#appContainer', // -必选，微应用的容器节点的选择器或者 Element 实例
      activeRule: '/b-child', // - 必选，微应用的激活规则
      props: { // - 可选，主应用需要传递给微应用的数据。
        msg: '我是父应用传过来的值，传递给B应用'
      }
    },
    {
      name: 'c-child',
      entry: 'http://localhost:8033',
      container: '#appContainer',
      activeRule: '/c-child',
      props: {
        msg: '我是父应用传过来的值，传递给C应用'
      }
    }
  ]

  registerMicroApps(apps, {
    beforeLoad: [
      app => {
        console.log(`${app.name}的beforeLoad阶段`)
      }
    ],
    beforeMount: [
      app => {
        console.log(`${app.name}的beforeMount阶段`)
      }
    ],
    afterMount: [
      app => {
        console.log(`${app.name}的afterMount阶段`)
      }
    ],
    beforeUnmount: [
      app => {
        console.log(`${app.name}的beforeUnmount阶段`)
      }
    ],
    afterUnmount: [
      app => {
        console.log(`${app.name}的afterUnmount阶段`)
      }
    ]
  })

  start({ experimentalStyleIsolation: true, prefetch: 'all' })
}

App.vue

    <!-- id为appContainer就是放置子应用的容器 -->
    <div id="appContainer"></div>

main.js

import {
  useQiankun
} from './qiankun'
.........................
vueApp.$nextTick(() => {
  useQiankun()
})

4、子项目安装和配置（B和C除了名称都一样）
安装

npm i vue-router@3.2.0 vuex@3.4.0

代码
public-path.js

/* eslint-disable camelcase */

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

修改main.js如下

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

Vue.config.productionTip = false

let router = null
let instance = null

function render ({ container, parentStore } = {}) {
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/b-child' : process.env.BASE_URL,
    mode: 'history',
    routes
  })

  instance = new Vue({
    router,
    store,
    data () {
      return {
        parentStore
      }
    },
    render: h => h(App)
  }).$mount(container ? container.querySelector('#bChild') : '#bChild')
  // index.html 里面的 id 需要改成 appVueHash，否则子项目无法独立运行
}

if (!window.__POWERED_BY_QIANKUN__) {
  // 全局变量来判断环境
  render()
}

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

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount (props) {
  if (props.parentStore) {
    await props.parentStore.dispatch('getResource', { name: 'B应用的资源' })
  }

  console.log('现在进入子应用b-child的mount周期', props)

  render(props)
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount () {
  console.log('现在进入子应用b-child的unmount阶段')
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
  router = null
}

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

vue.config.js

module.exports = {
    ....................
  devServer: {
    ....................
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  ....................
  configureWebpack: {
      ....................
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`
    }
  }
}

5、运行

npm run dev-all