微前端子应用加载时白屏怎么办？

ლ红彦提问于 2026-03-26 21:13:24 阅读 8

前端

我用 qiankun 搭了个微前端项目，主应用能正常加载，但子应用一挂载就白屏，控制台也没报错，特别奇怪。

我试过把子应用单独跑起来是没问题的，集成到主应用后路由也配置对了，但就是显示不出来。是不是 entry 配置有问题？

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:8081',
    container: '#subapp-container',
    activeRule: '/sub'
  }
]);

应用加载

我来解答赞 2 收藏

反馈

1 条解答

一小敏 Lv1

我的做法是先检查子应用的 publicPath 配置。qiankun 默认会把子应用的资源都加载到主应用的上下文路径，如果子应用的静态资源（js、css）没有正确配置路径的话，就会导致白屏。

在子应用的 webpack 配置里加上这个：

output: {

  publicPath: window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || '/'

}

另外记得确认子应用的 html template 里引用静态资源时用相对路径或者动态获取路径。比如说 <link href="/static/style.css"> 可能要改成 <link href="./static/style.css"> 或者更灵活的方式。

还有个容易忽略的地方就是样式冲突。如果你用的是 antd 这类 ui 框架，可能需要开启 qiankun 的 sandbox 样式隔离：

registerMicroApps([

  {

    name: 'sub-app',

    entry: '//localhost:8081',

    container: '#subapp-container',

    activeRule: '/sub',

    props: {},

    sandbox: {

      strictStyleIsolation: true

    }

  }

])

这几个地方搞定后应该就能解决大部分白屏问题了，我自己之前也被这问题折磨过好几天，希望对你有帮助。

2026-03-26 21:17