[JavaScript知识库]qiankun微前端踩坑记录

问题1.本地开发时，在主应用页面刷新会直接变成微应用页面，配置如下：

registerMicroApps([
  {
    name: 'app1',
    entry: '/app1/', // http://localhost:8080/app1/
    container: '#container',
    activeRule: '/app1',
  },
],

分析：由于entry和activeRule相同导致

解决方案：将activeRule改为主应用访问微应用的baseUrl

entry为微应用部署地址；activeRule为主应用使用 location.pathname 区分微应用

问题2：主应用、微应用部署在不同的服务器上，微应用更新后，浏览器读取缓存问题

解决方案：服务器需要给微应用的 index.html 配置一个响应头：Cache-Control no-cache，意思就是每次请求都检查是否更新。

以 Nginx 为例:

location = /index.html {
    add_header Cache-Control no-cache;
}

问题3：主应用、微应用部署在不同服务器上，主应用读取不到微应用静态资源文件，读取的时主应用的静态资源文件

解决方案：

对于?webpack?构建的微应用，微应用的?webpack?打包的?publicPath?需要配置成?/app1/，否则微应用的?index.html?能正确请求，但是微应用?index.html?里面的?js/css?路径不会带上?/app1/。

module.exports = {
    output: {

        publicPath: `/app1/`,
    },
};

解密微前端：从qiankun看子应用加载 - 掘金对于 qiankun 来说，路由劫持是在 single-spa 上去做的，而 qiankun 给我们提供的能力，主要便是子应用的加载和沙箱隔离。 我将分为三个 topic 去讲，这篇文章主要基于 qiankun 源码像大家讲一下微前端子应用的加载。 qiankun 是 sing…https://juejin.cn/post/6891888458919641096

阅读世界，共赴山海

423全民读书节，邀你共读