qiankun微应用动态设置静态资源访问路径

背景：项目需要支持多个国家访问，为了提升子应用的访问速度，又因为成本原因导致使用DNS无法动态解析ip映射到对应的域名，因此需要为子应用申请多个域名，然后由主应用根据国家进行映射和路由。

由于微前端框架使用的是qiankun，子应用打包的时候需要设置publicPath，否则访问静态资源的时候会去主应用中找，可能会导致异常，这个问题qiankun官方给出的方案是将publicPath的相对路径设置成一个绝对地址的url（其中的技术细节，请参考qiankun - 常见问题）。

这样的话，根据我的需求，在多个域名的场景下，这种方式是行不通的。

小伙伴还是很机灵的，不隔一会就给出了解决方案：在打包配置里面多打几个html出来，再写个插件动态的把html引入的静态资源用正则匹配替换成相对应的域名，主应用在访问的时候，子应用根据域名找到对应的html文件，这样不就解决了嘛

js 复制代码

// 编译
replaceDomainPlugin(env),
createHtmlPlugin({
    minify: true,
    pages: [
      {
        entry: "src/main.tsx",
        filename: "index.html",
        template: "index.html"
      },
      {
        entry: "src/main.tsx",
        filename: "malaysia.html",
        template: "malaysia.html"
      }
    ]
})

js 复制代码

// 替换
const replaceDomain = (env: Record<string, string>) => {
  const {
    VITE_PUBLIC_STATIC_URL,
    VITE_PUBLIC_MY_STATIC_URL
  } = env;
  const regex = new RegExp(VITE_PUBLIC_STATIC_URL, "g");
  return {
    name: "html-transform",
    transformIndexHtml(html: string, options: any) {
      switch(options.path) {
        case "/malaysia.html":
          return html.replace(regex, VITE_PUBLIC_MY_STATIC_URL);
        default:
          return html;
      }
    }
  };
};
    
export default replaceDomain;

麻烦虽然是麻烦了点，但由于时间的因素，我们先给出问题的解决方案

空闲的时候我又翻起了qiankun的文档，难道就没有简单优雅一点的方法解决这个问题吗？直到我在常见问题的版块中看到了一个问题：如何解决由于运营商动态插入的脚本加载异常导致微应用加载失败的问题，它使用了自定义的 getTemplate 方法对子应用的模版进行了劫持并加以修改再返回回去。我的老天奶，那我是不是可以在主应用中对子应用的模版进行劫持，再把约定好的标识位使用正则替换掉，如此一来，打包的问题解决了，多方维护加速域名的问题也解决了，这不就是我想要的吗！！！！！

说干就干，由于我们使用的是手动加载子应用的方式，因此我在loadMicroApp方法中传入了第二个参数

js 复制代码

loadMicroApp(
  {
    name: 'microApp',
    entry: self.entry,
    container: '#microAppContainer',
    activeRule: '/#/first/second',
  },
  {
    getTemplate(tpl) {
      const newTpl = tpl.replace(/\/regionTag\//g, self.entry);
      console.log(`${new Date()}  🚀🚀🚀 ~ newTpl ~ newTpl:`, newTpl);
      return newTpl;
    }
  }
);

从打印的结果来看，完全符合我们的需求，发布到线上后，替换后的模版也按照我们的预期正常运行。

踩坑：getTemplate中无法获取到vue实例this，因此我上面的代码片段中使用了self替代了this

至此，Ending！！