vue3微前端架構——基於螞蟻qiankun框架

楔子

首先，目前qiankun框架尚不支持vite，

微應用不能使用vite創建,

即使只是生產環境加的載微應用也不行，

因為vite打包代碼時，內部的esbuild會tree shake掉與qiankun相關的生命周期鈎子，

主應用沒影響，使用什么創建項目都無所謂

主應用

沒啥特殊的，隨便一個組件里留個容器div

<div id="container"></div>

在一個方法內加載微應用

import { loadMicroApp } from 'qiankun';
export default {
  setup(){
    let create = ()=>{
      loadMicroApp({ 
          name: 'vue3', 
          entry: 'http://localhost:7105/',
          container: '#container', 
        });
    }
    return {create};
  }
}

通過路由注冊微應用的方式，請自己看文檔

微應用

配置文件：vue.config.js

const path = require('path');
const { name } = require('./package');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const port = 7105;

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  devServer: {
    hot: true,
    disableHostCheck: true,
    port,
    overlay: {
      warnings: false,
      errors: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 自定義webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      // 把子應用打包成 umd 庫格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

router.js

import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld2 from "./components/HelloWorld2.vue";
import { createRouter, createWebHistory } from "vue-router";
const routes = [
  { path: "/", component: HelloWorld },
  { path: "/about", component: HelloWorld2 },
];
const router = createRouter({
  history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/vue3" : "/"),
  routes,
});
export default router;

main.js

這里有好多鈎子，是給主應用用的

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
let instance = null;

function render(props = {}) {
  const { container } = props;

  instance = createApp(App);
  instance.use(router);
  instance.mount(container ? container.querySelector("#app") : "#app");
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("%c ", "color: green;", "vue3.0 app bootstraped");
}

export async function mount(props) {
  render(props);
  instance.config.globalProperties.$onGlobalStateChange =
    props.onGlobalStateChange;
  instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}

export async function unmount() {
  instance.unmount();
  instance._container.innerHTML = "";
  instance = null;
}

app.vue

<template>
<button @click="go('/')">home</button>
<button @click="go('/about')">sub</button>
  <router-view></router-view>
</template>

<script>
import router from "./router"
export default {
  setup(){
    let go = (p)=>{
      router.push(p)
    }
    return {go}
  }
}
</script>