Vue中使用京东micro-app进行前端微应用（多应用开发）

京东micro-app文档地址：京东micro-app文档

名称	是否必填	值	说明
name	是	应用名称	<micro-app name='xx'>
url	是	应用地址	<micro-app url='xx'>
baseroute	-	‘’	设置子应用的基础路径 baseroute='/my-page/'
iframe	-	false	默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱，比如vite
keep-alive	-	false	开启keep-alive后，应用卸载时会进入缓存，而不是销毁它们，提升重复渲染的性能
ssr	-	false	当子应用是ssr应用时，需要设置ssr属性，此时micro-app会根据ssr模式加载子应用
default-page	-	‘’	默认情况下，子应用渲染后会展示首页，设置default-page可以指定子应用渲染的页面
disable-memory-router	-	false	关闭虚拟路由系统 （/child/?child-app=%2Fchild%2F -----》/child/ ）

主应用

1、安装micro-app

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

2、初始化micro-app

// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start(
{
  iframe: true, // 全局开启iframe沙箱，默认为false
  inline: true, // 全局开启内联script模式运行js，默认为false
  destroy: true, // 全局开启destroy模式，卸载时强制删除缓存资源，默认为false
  ssr: true, // 全局开启ssr模式，默认为false
  'disable-scopecss': true, // 全局禁用样式隔离，默认为false
  'disable-sandbox': true, // 全局禁用沙箱，默认为false
  'keep-alive': true, // 全局开启保活模式，默认为false
  'disable-memory-router': true, // 全局关闭虚拟路由系统，默认值false
  'keep-router-state': true, // 子应用在卸载时保留路由状态，默认值false
  'disable-patch-request': true, // 关闭子应用请求的自动补全功能，默认值false
  iframeSrc: location.origin, // 设置iframe沙箱中iframe的src地址，默认为子应用所在页面地址
  inheritBaseBody: true, // true: 采用基座标签 作为子应用的标签， false: 不采用
  aHrefResolver: (hrefValue: string, appName: string, appUrl: string) => string, // 自定义处理所有子应用 a 标签的 href 拼接方式
}
)

// 主应用监听子应用发送的数据
microApp.addDataListener('child-app', (data) => {
  console.log('来自子应用child-app的数据', data)
  childData.value = data
})

3、加载子应用

// Child.vue
<template>
  <div class="child-container">
    <!--
        *   name：子应用的名称
        *   url：子应用的入口地址
        *   baseroute：子应用的路由基础路径
        iframe：是否在iframe中加载子应用 （在vite环境需要设置为true）
      -->
    <micro-app
      name="child-app"
      url="http://localhost:6002/"
      baseroute="/child"
      :iframe="true"
    ></micro-app>
  </div>
</template>
<script setup>
import microApp from "@micro-zoe/micro-app";

// 发送数据给子应用
microApp.setData("child-app", { token: "xxx" });
</script>

4、router配置

// router/index.js
import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.VITE_BASE),
  routes: [
    {
      path: "/child/:page*",
      name: "child",
      component: () => import("@/views/Child.vue"),
    },
  ],
});

子应用

1、vite.config.js

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  // 重点：配置基座路径，配合主应用 baseroute
  base: "/child/",
  server: {
    host: "0.0.0.0",
    port: 6002,
    cors: true,
    // micro-app从主应用通过fetch加载子应用的静态资源，由于主应用与子应用的域名不一定相同，所以子应用需要支持跨域。
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
});

2、public-path.js

// public-path.js
// 但为了微前端环境的兼容性，我们可以在这里做一些微前端相关的初始化
if (window.__MICRO_APP_ENVIRONMENT__) {
  // console.log(window);
  const data = window.microApp.getData();
  console.log(data, "---来自主应用传递的数据");
  window.localStorage.setItem("token", data.token);
}

3、main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./public-path";
import "./index.css";

let app = null;

// 渲染函数
function render() {
  app = createApp(App);
  app.use(router);
  app.mount("#app");
}

// 微前端环境下，等待主应用通知渲染
if (window.__MICRO_APP__) {
  window.addEventListener("mount", render);
} else {
  // 独立运行时直接渲染
  render();
}

// 微前端卸载
window.addEventListener("unmount", () => {
  app.unmount();
  app = null;
});

4、index.vue

// index.vue
<template>
  <div class="index">
    <h1 class="h1">我是子应用首页</h1>
    <h3>获取主应用数据：{{ token }}</h3>
    <RouterLink to="/about?id=9527">关于</RouterLink>
    <div @click="sendData" style=" color: #007bff;">-> 点击向主应用发送数据</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const token = ref(window.localStorage.getItem('token'))
const sendData = () => {
  // 清除子应用发送主应用的旧数据
  window.microApp.clearData()
  // 发送数据给主应用
  window.microApp.dispatch({ name: 'child1' })
}

 

案例下载：下载

 

=============================================================================