微前端实战-乾坤

主应用

安装qiankun

• yarn add 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;

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: "vueApp",
    entry: "//localhost:30001",
    container: "#vue",
    activeRule: "/vue",
    props: {
      params: 111
    }
  },
]);

start({
  prefetch: false
});


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

需要注意的事项

1. 路由hash模式改成history

   const router = new VueRouter({
     mode: 'history',
     routes,
   });
   

2. app.vue中的id需要删除或者更改，不能是app

   <!-- 这里id不能使用默认app，子程序会直接挂在这个节点上，会直接调整到子程序 -->
   <div id="appmain">
     <div id="nav">
       <!-- 基座中自己的路由 -->
       <router-link to="/">主应用</router-link> |
       <!-- 引入其他子应用路由 -->
       <router-link to="/vue">子应用</router-link>
     </div>
     <router-view />
     <div id="vue"></div>
   </div>
   

子应用

main.js

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() {
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
}

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

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

export async function bootstrap() {}

export async function mount(props) {
  console.log(props);
  render(props);
}

export async function unmount() { 
  instance.$destroy();
}

路由改成history

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

vue.config.js

module.exports = {
  devServer: {
    port: 30001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `vueApp`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    },
  },
}