npm create vite@latest main-app -- --template vue-ts

// router.ts
import { createRouter, createWebHistory } from "vue-router";
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home/:page*', name: 'home app', component: () => import('@/views/home.vue') },
  { path: '/about/:page*', name: 'about app', component: () => import('@/views/about.vue') },
]
const router = createRouter({
  history: createWebHistory('/'),
  routes: routes,
})
export default router;

// home.vue
<template>
	<micro-app name='home' url='http://localhost:3001/micro-app/home' heep-alive />
</template>
<script lang="ts" setup></script>

// about.vue
<template>
	<micro-app name='about' url='http://localhost:3002/micro-app/about' heep-alive />
</template>
<script lang="ts" setup></script>

// main.ts
import microApp from '@micro-zoe/micro-app'
const lifeCycles = {
  created() {
    console.log('標(biāo)簽初始化后，加載資源前觸發(fā)')
  },
  beforemount() {
    console.log('加載資源完成后，開始渲染之前觸發(fā)')
  },
  mounted() {
    console.log('子應(yīng)用渲染結(jié)束后觸發(fā)')
  },
  unmount() {
    console.log('子應(yīng)用卸載時(shí)觸發(fā)')
  },
  error() {
    console.log('子應(yīng)用渲染出錯(cuò)時(shí)觸發(fā)，只有會(huì)導(dǎo)致渲染終止的錯(cuò)誤才會(huì)觸發(fā)此生命周期')
  }
}
microApp.start({ lifeCycles })

import microApp from '@micro-zoe/micro-app'
import painfulJoya from '@micro-zoe/plugin-painful-joya' // 官方封裝的子午線埋點(diǎn)插件
microApp.start({
  plugins: {
    // 設(shè)置為全局插件，作用于所有子應(yīng)用
    global: [painfulJoya],
    // 設(shè)置 home 子應(yīng)用的獨(dú)享配置
    home: [{
      scopeProperties: ['AMap'],
      loader(code, url) {
        console.log('我是插件loder函數(shù)', code, url)
        return code
      }
    }],
  }
})

module.exports = {
  devServer: {
    disableHostCheck: true, // 關(guān)閉端口檢測(cè)
    port: 4001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      jsonpFunction: `webpackJsonp-chile-vue2`
    }
  },
}

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局變量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
// 之后，在 main.js 中引入

import './public-path'
import Vue from 'vue'
import App from './App.vue'
let app = null
////////// 1. 首先是默認(rèn)模式的配置
app = new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
// 監(jiān)聽卸載，因?yàn)槊看味紩?huì)重新加載所有js，所以建議配置一個(gè)卸載方法去清空依賴項(xiàng)等
window.unmount = () => {
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
  console.log('微應(yīng)用vue2卸載了 -- 默認(rèn)模式')
}
////////// 2. umd 加載模式
// 初始化與二次加載時(shí)調(diào)用
window.mount = () => {
  app = new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  console.log("微應(yīng)用vue2渲染了 -- UMD模式")
}
// 卸載操作放入 unmount 函數(shù)
window.unmount = () => {
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
  console.log("微應(yīng)用vue2卸載了 -- UMD模式")
}
// 如果不在微前端環(huán)境，則直接執(zhí)行mount渲染
if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const router = new VueRouter({
  mode: 'history', // hash 模式可以不用配置 base
  //  __MICRO_APP_BASE_ROUTE__ 為micro-app傳入的基礎(chǔ)路由
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./pages/home.vue'),
    },
    {
      path: '/page',
      name: 'page',
      component: () => import( './pages/page2.vue')
    }
  ];
})
export default router;

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
window.mount = () => {
  ReactDOM.render(
    <React.StrictMode>
      <Router />
    </React.StrictMode>,
    document.getElementById('root')
  );
}
// 卸載
window.unmount = () => {
  notification.destroy()
  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}

import React, { lazy, Suspense, useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route, Redirect, Link } from 'react-router-dom'
function Router () {
  <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/react16/'} >
    <Menu mode="horizontal">
      <Menu.Item key='home'>
        <Link to='/'>home</Link>
      </Menu.Item>
      <Menu.Item key='page'>
        <Link to='/page'>page</Link>
      </Menu.Item>
    </Menu>
    <Switch>
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/page">
        <Page />
      </Route>
      <Redirect to='/' />
    </Switch>
  </BrowserRouter>
}
export default Router