微前端-micro-app基础使用

1. 介绍#

借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。并且由于自定义 ShadowDom 的隔离特性，micro-app 不需要像 single-spa 和 qiankun 一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改 webpack 配置，是目前市面上接入微前端成本最低的方案。官网

2. 接入 micro-app#

2-1. 基座应用#

1. 安装依赖#

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

2. 引入#

// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start()

3. 分配子应用路由#

const routes = [
	...{
		path: '/micro-app/:page*',
		name: 'Microapp',
		component: () => import('../views/Microapp.vue'),
	},
]

4. 潜入微应用#

// views/Microapp.vue
<template>
	<div>
		<h1>子应用</h1>
        <!--
      name(必传)：应用名称，每个`name`都对应一个应用，必须以字母开头，且不可以带有 `.`、`#` 等特殊符号
      url(必传)：页面html的地址
      baseroute(可选)：基座应用分配给子应用的基础路由,
     -->
		<micro-app
			name="app1"
			url="http://localhost:8082/ "
			baseroute="/micro-app"
		></micro-app>
	</div>
</template>

baseroute： 当路由条件不满足：基座应用是 history 路由，子应用是 hash 路由时， 需要向子应用下发 baseroute， 此时就需要传 baseroute

2-2. 子应用: 路由设置#

1. 设置基础路由#

如果基座应用是 history 路由，子应用是 hash 路由，不需要设置基础路由，这一步可以省略

const router = new VueRouter({
	mode: 'history',
	base: window.__MICRO_APP_BASE_ROUTE__ || '/',
	routes,
})

• 设置基础路由，子应用可以通过 window.MICRO_APP_BASE_ROUTE获取基座下发的 baseroute，如果基座没有设置 baseroute 属性，则此值默认为空字符串
• 关于主子应用路由的其他情况，后面紧接着会讲

2. 子应用跨域调试#

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

// vue.config.js
module.exports = {
	devServer: {
		headers: {
			'Access-Control-Allow-Origin': '*',
		},
	},
}

3. 子应用的路由设置#

路由类型约束#

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

注意#

1. 如果基座是 history 路由，子应用是 hash 路由，不需要设置基础路由 baseroute

2. vue-router 在 hash 模式下不支持通过 base 设置基础路由，需要创建一个空的路由页面，将其它路由作为它的 children

   TIP

   综上建议：基座路由统一使用 history