micro-app 使用

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`; 
  }
  

  ---------------------------------------------------------正在编辑完善中