微前端改造工具

适用于Vue & React 的微前端改造工具，能够快速将现有项目改造为微前端基座

且不侵入子项目业务代码

安装

npm i micro-app-util
or
yarn add micro-app-util

使用

1. 声明子应用

在项目 src 目录下创建微前端应用列表文件. 文件名称任意，以下以microApps.js为例

// microApps.js  示例代码，请根据实际项目进行修改

const { origin, hostname } = location
const isLocal = hostname === 'localhost' // 请根据实际项目地址进行修改

export default {
  dataManagement: {
    name: 'dataManagement',
    title: '数据管理',
    isLocal,
    origin,
    devOrigin: 'http://localhost:5050',
    baseRoute: '',
    publicPath: '/microapp/data-management',
    devPublicPath: '/base',
    gitlab: 'http://abc/data-management',
    usePrefetch: !isLocal,
    isViteApp: true // 子应用使用Vite构建
  },
}

参数说明

name

必填，应用名称，用于下文 LoadMicroApp 组件获取子应用信息

title

必填，用于子应用加载失败时的提示

isLocal

必填，是否是本地开发模式，示例中使用hostname是否为localhost

origin

必填，子应用所部署的域名，示例中使用当前基座应用域名

devOrigin

必填，子应用在本地开发时的服务地址

devPublicPath

必填，本地dev开发时的静态资源前缀路径，如果子应用是Vite应用，请添加此前缀，并在子应用vite.config.js中将base设置为对应的值

// 子应用 vite.config.js
import { defineConfig } from 'vite';

export default defineConfig((command) => {
	return {
		base: command === 'build' ? publicPath : devPublicPath // 此处的值应与microApps配置保持一致
	}
})

baseRoute *

选填，为子应用路由配置额外的根路径，如果基座应用是history路由，子应用是hash路由，可以不设置baseRoute。

isViteApp *

选填，子应用是否是由Vite构建，如果是，则开启额外的资源处理，此字段在webpack应用中不生效

publicPath *

选填，子应用部署路径为非根路径时，需要进行静态资源路径补全

gitlab *

选填，用于本地开发时，子应用加载失败后的错误提示

usePrefetch *

选填，是否在线上启用子应用的预加载，本地服务不生效

2. 注册子应用

在主应用入口文件中（通常是main.js）注册子应用

// main.js
import Message from '您的message组件库';
import microApps from './microApps'

import { initMicroApp } from 'micro-app-util/dist/vue' // Vue2/Vue3
import { initMicroApp } from 'micro-app-util/dist/react' // React

import 'micro-app-util/dist/style.css' // 按需使用默认样式

// 注册子应用, 尽量在应用render前注册
initMicroApp(microApps, {
  onError: (app) => {
    const { title = '', gitlab = '' } = app
    Message.error({
      showClose: true,
      duration: 5000,
      dangerouslyUseHTMLString: true,
      message: `微前端: <strong>${title}</strong> 尚未启动, 或此应用不允许跨域请求，请更改设置。<u><a href="${gitlab}" target="_blank">点此前往应用仓库</a></u>`
    })
  }
})

// ...

initMicroApp(appList [, callback])

参数说明

appList 必填，在步骤1中声明的应用列表，用于注册子应用

callback 选填，用于加载子应用失败时的错误提示，默认是浏览器自带的 alert 事件

3. 加载子应用界面

3.1 注册全局组件（Vue2/Vue3）

全局注册使用更方便, 在入口文件（通常是main.js）中全局注册

Vue2

// main.js
import Vue from 'vue';
import { LoadMicroApp } from 'micro-app-util/dist/vue2'
import microApps from './microApps'

// 如果需要默认样式
import 'micro-app-util/dist/style.css'

Vue.use(LoadMicroApp, { appList: microApps })

Vue3

// main.js
import Vue from 'vue';
import LoadMicroApp from 'micro-app-util/dist/LoadMicroAppVue3.vue' // ！！注意这里是默认导出
import microApps from './microApps'

// 如果需要默认样式
import 'micro-app-util/dist/style.css'

Vue.use(LoadMicroApp, { appList: microApps })

React

暂不支持全局注册，使用方式请参考下文使用组件

参数说明

appList，注册全局组件时为必填，值为步骤1 声明子应用中声明的应用列表，用于拉取相关子应用信息

3.2 使用组件

以下代码将会拉取名为 dataManagement 的子应用

Vue2/Vue3

<template>
  <LoadMicroApp name="dataManagement" />
</template>

<script>

export default {
  name: 'Demo',
};
</script>

React

// xxxPage.jsx 
import { LoadMicroApp } from 'micro-app-util/dist/react'
import microAppList from '@/microApps.js' 
export default () => {
	return (
      // code...
			<LoadMicroApp name='appName' appList={microAppList} className='test-class'/> 
    	// code...
	)
}

参数说明

参数说明

appList 在React应用中必填，Vue应用中若注册了全局组件，使用组件时可不填。

name 必填，所要拉取的子应用名称，对应步骤1中 name 属性。

默认样式

如果需要默认样式，请手动导入

// main.js
import 'micro-app-util/dist/style.css' // 引入后，子应用宽高为容器节点的100%

4. 监听组件卸载

组件 LoadMicroApp 在被卸载后，会通过window派发事件进行通知，可在子应用中监听此事件进行后续操作

window.addEventListener(`unmount-${name}`, () => { // name是子应用的名称
  console.log(`子应用 ${name} 已被卸载`)
})

例如子应用 name 为 test-app 其监听示例代码如下

const handlerFunction = () => {
 // ...
}
window.addEventListener(`unmount-test-app`, handlerFunction)

在离开页面后取消监听事件

window.removeEventListener(`unmount-test-app`, handlerFunction)

注意事项

跨域

本地开发时，拉取子应用资源跨域

若本地开发时加载子项目出现跨域，则需要子项目开发服务器开启允许跨域

vue.config.js 或 webpack.config.js

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*' // 或自行配置所需域名
    }
  }
}

vite.config.js

export default = {
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*' // 或自行配置所需域名
    }
  }
}

本地开发时，通过主应用访问子应用时，子应用接口跨域

需要将子应用devServer 中配置的proxy 在主应用中配置一遍

路由加载规则

例：

主应用 页面 Page1 对应路由 为 /page1

子应用 页面 ChildPage1 对应路由为 /test-child/page1

子应用 页面 ChildPage2 对应路由为 /test-child/page2

此时主应用与子应用根路径不一致，可通过配置 baseRoute 解决

主应用microApps列表中（参考此文第一节）

{
  // ...
  name: 'Child',
  baseRoute: '/test-child'
}

若 此时浏览器路径为 /page1，将会加载子应用页面 ChildPage1