京东 micro-app 将所有功能都封装到一个类WebComponent组件中，拥有的特点：JS沙箱，样式隔离，元素隔离，数据通信，插件系统，预加载

micro-app介绍

搭建项目地址

B站视频地址

主项目改动

1、安装依赖

npm i @micro-zoe/micro-app --save

2、在入口处引入

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

3、my-page.vue 引用 micro-app 组件写子项目地址

<!-- my-page.vue -->
<template>
  <div>
    <h1>myvue1子应用</h1>
    <!-- 
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
     -->
    <micro-app
      name="mypage1"
      url="http://localhost:8031/"
      baseroute="/"
    ></micro-app>
  </div>
</template>

子项目改动

1、路由类型约束

• 1、基座是hash路由，子应用也必须是hash路由
• 2、基座是history路由，子应用可以是hash或history路由

设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute，如果没有设置baseroute属性，则此值默认为空字符串

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
  // 👇 设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute，如果没有设置baseroute属性，则此值默认为空字符串
  base: window.__MICRO_APP_BASE_ROUTE__ || '/',
  routes,
})

let app = null;

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


// -------------------分割线-umd模式------------------ //
export async function mount(props) {
  app = new Vue({
    router,
    render: h => h(App)
  }).$mount(props?.container?.querySelector("#app") || "#app");
  console.log("微应用vue2渲染了 -- 来自umd-mount");
}

// 卸载应用
export async function unmount() {
  app.$destroy();
  app.$el.innerHTML = "";
  app = null;
  console.log("微应用vue2卸载了 -- 来自umd-unmount");
}

export async function bootstrap() {}

// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount };
} else {
  // 非微前端环境直接渲染
  mount();
}

2、在webpack-dev-server的headers中设置跨域支持。

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
},