基于vue-cli  3.12.1测试

主项目

vue create mian

安装qiankun

npm i qiankun -S

main.js配置

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

Vue.config.productionTip = false

//qiankun配置
import { registerMicroApps, start } from 'qiankun';

//子应用列表
let apps = [
    {
      name:'subapp',
      entry:'//localhost:8080',//子应用的地址，这里演示是本地启动的地址。
      container:'#app',//子应用的容器节点的选择器（vue一般为app）
      activeRule:'/subapp',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url应为localhost:8081/subapp
    }
  ]

//注册子应用
registerMicroApps(apps);

//启动
start();

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

子项目

vue create subapp

根目录创建public-path.js文件

//public-path.js

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

mian.js配置

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

Vue.config.productionTip = false
let instance = null;
function render(props = {}) {
  const { container } = props;

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

// 独立运行时
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);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

webpack配置，创建vue.config.js

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

启动

先启动子项目，再启动主项目

访问

http://localhost:8081/subapp

感谢原文章作者：https://juejin.cn/post/7007714510186217508