1. 引入 micro-app
1.1. 安装
# 安装 micro-app
npm i @micro-zoe/micro-app --save
1.2. 引入 micro-app
在入口文件处进行引入
// index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
1.3. 在需要使用的地方使用 micro-app
标签
常用配置信息:
name(必传):应用名称
url(必传):应用地址,用于生产,直接填写生产环境访问地址
destroy(可选):卸载时是否强制删除缓存资源,默认为false
keep-alive(可选):开启keep-alive后,应用卸载时会进入缓存,而不是销毁它们,以便保留应用的状态和提升重复渲染的性能;默认为false
export function MyPage () {
return (
<div>
<h1>子应用</h1>
<micro-app name='app1' url='http://localhost:3000/'></micro-app>
</div>
)
}
2. 解决跨域问题
2.1. 生产环境
在 nginx 配置文件中,在访问方的配置信息下加入如下代码:
2.2. 调试环境
在 craco.config.js
添加允许跨域,以下为 react 修改配置信息,vue 或 其它框架 或 react 其它版本请自行百度。
版本信息:
- react:18.0.0
- webpack:5.72.0
// craco.config.js
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*' // 主要代码
}
}
};
3. 解决静态资源访问问题
- 子应用中的资源访问时,自动补全可能会失效。
- 例如:子应用中引用图片
/myapp/test.png
,在最终渲染时会补全为http://localhost:3000/myapp/test.png
在src目录下新建名称为 public-path.js
的文件,文件内容如下:
// __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__
}
在子应用的入口文件的 最顶部 引入 public-path.js
文件
4. 解决接口的访问问题
4.1. 子应用与基座部署在同一地址,同一端口,不存在跨域问题
调用的接口均走基座的地址进行调用,调用接口存在跨域问题,则在基座处理跨域问题即可
4.2. 子应用与基座部署在非同一地址 或 非同一端口,存在跨域问题
-
方案一:调用接口均采用基座的接口进行调用,跨域问题均在基座进行处理
-
方案二:调用接口走各自子应用的ip地址进行调用
在子应用中的接口请求拦截器中将子应用的 ip 地址设置为 baseURL,以下为 react 中使用
// 引入 axios import axios from 'axios'; // 配置请求基础路径 axios.defaults.baseURL = '/api'; if (window.__MICRO_APP_BASE_APPLICATION__) { let reg = /^http(s)?:\/\/(.*?)\//; axios.defaults.baseURL = `${reg.exec(window.__MICRO_APP_PUBLIC_PATH__)[0]}/api`; }
---------------------------------------------------------正在编辑完善中