qiankun子应用vue加载js资源失效问题解决

场景描述：

        当使用qiankun框架时通常会存在一个基座对应多个微应用，不同微应用中很可能会用到不同的资源，所以子应用单独引入外部js资源就尤为重要,主要分为以下两步：

1，在基座中创建白名单字段

// 在入口方法的whiteWords 中创建白名单字段， 比如cdn_js
start({
      // 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理
      excludeAssetFilter: (assetUrl) => {
        const whiteList: any = [];
        const whiteWords = [ 'cdn_js'];
        if (whiteList.includes(assetUrl)) { return true; }
        return whiteWords.some((w) => assetUrl.includes(w));
      },
    });

 2，在微应用中需要使用该资源的vue文件中动态引入

 /**
 * @description: 动态加载资源方法
 * @param {string} 要加载的外部资源链接
 * @return {*}
 */  
const loadUrl = (url:string){
  const script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', url);
  const head = document.getElementsByTagName('head');
  if (head.length) {
    head[0].appendChild(script);
  } else {
    document.documentElement.appendChild(script);
  }
}
// 目标外部js资源地址+ '?'+'白名单字段'
loadUrl('http://ip:port/xxxx/xxxx.js?cdn_js');