一、加载和解析html

加载和解析相关的html，也应该在微前端的生命周期中执行

• 新建 main/micro/loader/index.js 暴露加载html方法 loadHtml

  /**
   * 加载html方法
   */
  export const loadHtml = async (app) => {
        // 1. 子应用需要显示在哪里
        const container = app.container
        // 2. 子应用的入口
        const entry = app.entry
        const html = await parseHtml(entry)
        const ct = document.querySelector(container)
        if (!ct) {
            throw new Error('容器不存在，请查看')
        }
        ct.innerHTML = html
        return app
    }
  
  export const parseHtml = async (entry) => {
      // axios ajax fetch
      const html = await fetchResource(entry)
      const div = document.createElement('div')
      div.innerHTML = html
      return html
  }

• 新建 main/micro/utils/fetchResource.js 请求加载资源

  export const fetchResource = url => fetch(url).then(async res => await res.text())

• 请求子项目资源，存在跨域问题，在对应子项目中配置如下内容

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

• 在 main/micro/lifeCycle/index.js 中的 beforeLoad 调用 loadHtml 方法

  export const beforeLoad = async (app) => {
    await runMainLifeCycle('beforeLoad')
    app && app.beforeLoad && app.beforeLoad()
    const subApp = await loadHtml(app) // 获取子应用的内容
    subApp && subApp.beforeLoad && subApp.beforeLoad()
    return subApp
  }

• 效果如下：