主应用:

安装qiankun: npm i qiankun -S

App.vue中新建id为vue的div

<template>
  <div id="app">
    <el-menu :router="true" mode="horizontal">
      <!-- 基座中可以放自己的路由应用 -->
      <el-menu-item index="/">Home</el-menu-item>
      <!-- 引用其他子应用 
      <el-menu-item index="/vue">vue应用</el-menu-item>
    </el-menu>
    <!-- vue应用挂载处 -->
    <div id="vue"></div>
    <router-view/>
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import elementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, start } from 'qiankun'

// 注册方法
registerMicroApps([
  {
    name: 'vueApp', // 应用的名字
    entry: '//localhost:10000', // 默认会加载这个html，解析里面的js，动态的执行 （子应用必须支持跨域） （可以省略http:）
    container: '#vue', // 挂载html到哪个元素上
    activeRule: '/vue' // 激活规则/路径,当访问/vue时，就会挂载子应用
  }
])

// 启动 qiankun
start({
  prefetch: false // 取消预加载
})

Vue.config.productionTip = false

Vue.use(elementUi)

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

子应用：

(不需要安装任何插件了)

main.js

/* eslint-disable camelcase */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

let instance = null // 卸载应用需要

function render (props = {}) {
  const { container } = props
  instance = new Vue({
    store,
    router,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
  // 这里是挂载到自己的html中，基座会拿到这个挂载后的html的,将其插入进去
}

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

// 作为微应用时加载正确的publicPath
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

// props可以接受父应用传过来的各种属性，值，用来通信。也可以传递vuex数据
// 启动方法
export async function bootstrap (props) {
  console.log('[vue] vue app bootstraped')
}

// 应用挂载方法
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.js

const router = new VueRouter({
  mode: 'history',
  // base: process.env.BASE_URL,
  // 更改base，当你访问/vue时加载项目
  base: '/vue',
  routes
})

vue.config.js

module.exports = {
  devServer: {
    port: 10000, // 跟主应用协议好的端口号
    headers: {
      'Access-Control-Allow-Origin': '*' // 子应用必须允许跨域，方便主应用加载子应用的资源
    }
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd' // 把微应用打包成 umd 库格式
      // jsonpFunction: `webpackJsonp_${name}`
    }
  }
}