qiankun子应用加载百度地图

qiankun的子应用内，百度地图加载不出来，控制台报了fetch跨域的错，试了好多解决方案，最终成功加载出来

操作如下：

1、主应用的start方法，增加如下代码，我使用的qiankun的版本是2.6.3。qiankun版本不能低于2.0.17，excludeAssetFilter是设置动态加载的微应用资源不被qiankun劫持

start({
        prefetch: false,
        singular: true,
        strictStyleIsolation: false,
        fetch: window.fetch,
        excludeAssetFilter: (assetUrl) => {
          console.log("assetUrl", assetUrl);
          const whiteList = [];
          const whiteWords = ["api.map.baidu"];
          if (whiteList.includes(assetUrl)) {
            return true;
          }
          return whiteWords.some((w) => {
            return assetUrl.includes(w);
          });
        },
 });

2、子应用原本是使用script的形式直接引入在header中的，现在改成动态引入，先新建一个方法，加载百度地图脚本

export function mapInit() {
  const ak = `xxxxxx`  //替换成实际的ak
  const src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=onBMapCallback`
  return new Promise(function (resolve, reject) {
    if (typeof BMap !== 'undefined') return resolve(BMap)

    window.onBMapCallback = function () {
      console.log('百度地图脚本初始化成功...')
      resolve(BMap)
    }

    let script = document.createElement('script')
    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', src)
    document.body.appendChild(script)
  })
}

在vue文件实际使用百度地图的地方，引入script

import { mapInit } from '@/utils/map'

export default {
  mounted() {
    // 初始化地图
    this.$nextTick(() => {
      mapInit()
        .then((BMap) => {
          console.log(BMap)
          console.log('加载成功...')
          this.map = new BMap.Map('map', {
            enableMapClick: false
          })
          // 设置地图中心点
          this.map.centerAndZoom('北京', 10)
          // 支持缩放
          this.map.enableScrollWheelZoom(true)
          // 比例尺
          this.map.addControl(new BMapGL.NavigationControl())
        })
        .catch((err) => {
          console.log(err)
        })
    })
  }
}

3、这个时候发现，地图还是加载不出来，但是主应用又没有报错，在主应用的index.html的header或者body中，也需要引入百度地图api

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xxxxxxx"></script>

 //ak需要替换成实际的ak

4、这样子应用里，就成功加载了百度地图，并且可以使用了。