微前端中子应用注册后为什么不显示？

IT人启腾提问于 2026-03-27 08:40:25 阅读 15

框架

我用 qiankun 搭了个主应用，注册了一个 Vue 子应用，但页面一直是空白的，控制台也没报错。子应用单独运行是正常的，就是嵌入主应用后不渲染。

我检查了 activeRule 和 entry 地址，看起来没问题。是不是 registerMicroApps 的写法有毛病？下面是我的注册代码：

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

主应用里也加了 <div id="subapp-container"></div>，路由跳到 /dashboard 时容器元素确实存在，但里面啥也没有……到底漏了哪一步？

我来解答赞 5 收藏

反馈

1 条解答

Top丶志玉 Lv1

看起来你的基础配置都对了，但有个常见的坑可能被忽略了。qiankun 默认会使用 fetch 获取子应用的 HTML，如果你用的是 Vue CLI 或 webpack-dev-server 开发服务器，默认情况下可能没开启 CORS。

先试试在子应用开发服务器启动时加上 --open 和 --https 参数，或者在 webpack.config.js 里加个 devServer: { headers: { "Access-Control-Allow-Origin": "*" } }。这样可以确保跨域资源共享正常。

另外确认下子应用的 publicPath 设置，建议改成相对路径，比如 / 这样。有时候绝对路径会导致资源加载失败。

再就是检查下主应用里的样式隔离配置，有时全局样式冲突也会导致内容不显示。可以在 registerMicroApps 里加上

{

    ...,

    sandbox: { strictStyleIsolation: true }

}

最后记得清除浏览器缓存再试一次。希望能帮到你，折腾微前端确实挺费神的，别灰心！

2026-03-27 09:03