微前端（二）—— micro-app （子应用接入）

1、基础配置

跨域处理

micro-app微前端中将子应用作为一种静态资源进行加载，所以需要开启跨域支持

开发阶段webpack的工程需要加入以下配置（vite默认开启跨域支持，不需要额

外配置）

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

生产阶段nginx代理的静态资源和接口都需要进行配置。

资源系统

子应用如果是webpack构建的项目需要在src目录下创建名称为public-path.js，vite构建的不需要

// __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.ts

import './public-path'

2、数据通信

      具体通讯机制，可参考官网，MicroApp 通讯方式

        建议：token，用户信息，子应用一级路由，退出等全部由基座提供

3、新建自定义hooks，接收主应用路由等信息

// useMicroApp.ts
import router from "@/router";

// 是否在微前端环境中
export const isMicroAppEnv = window.__MICRO_APP_ENVIRONMENT__;

// 订阅主应用中分发过来的路由跳转
export function subscribeRouterChange() {
	if (!isMicroAppEnv) return;
	window.microApp.addDataListener((data: any) => {
		// 当主应用下发跳转指令时进行跳转
		if (data.type === "router-change" && data.path) {
			router.push(data.path);
		}
	});
}

// 订阅主应用中的全局用户信息数据
export function subscribeUserInfo() {
	if (!isMicroAppEnv) return;
	const data = window.microApp.getGlobalData();
	return data;
}

// 向主应用分发路由-控制主应用的路由跳转
export function dispatchRouterChange(path: string, query: any) {
	if (!isMicroAppEnv) return;
	// 获取主应用路由
	const baseRouter = window.microApp.router.getBaseAppRouter();
	// 控制主应用跳转
	baseRouter.push({ path, query });
}

// 路由跳转到详情页面  first:一级目录  route：路由path，query：参数
export function routerChange(first: string, route: string, query: any) {
	if (isMicroAppEnv) {
		let url = first + route;
		dispatchRouterChange(url, query);
	} else {
		router.push(route);
	}
}

main.ts中引用。

4、子应用路由跳转方式

• 子应用内部跳转

        子应用直接管理自己的路由表，进行跳转

• 跨应用跳转

        子应用通过封装的hooks中的dispatchRouterChange(path，query) 进行跳转。

5、子应用部署配置

各个子应用都需要配置唯一的开发或生产环境服务的公共基础路径，建议开发、生产阶段保持一致

// vite.config.js

export default defineConfig(() => {
  return {
    base: '文件夹名称'
  }
})

// router.js
export default createRouter({
  	history: createWebHistory('文件夹名称'),
})

以上就是子应用的项目改造，当然，可能不太全，遇到其他问题，也可以进行细聊交流~~