微前端qiankun框架，子页面图标样式错乱问题,显示为X

胡八一、

已于 2025-08-23 00:03:13 修改

阅读量95

点赞数 3

CC 4.0 BY-SA版权

分类专栏：报错解决前端文章标签：前端 qiankun vue

于 2025-08-23 00:01:56 首次发布

本文链接：https://blog.csdn.net/qq_44732146/article/details/150620287

报错解决同时被 2 个专栏收录

68 篇文章

订阅专栏

前端

52 篇文章

订阅专栏

问题

quankun官方文档

使用qiankun加载子页面，子页面是element-ui组件库，用vue2来开发，图标出现了样式错乱，显示为X

在这里插入图片描述

loadMicroApp 下子应用的图标（ElementUI/iconfont）不见，99% 是资源路径 / 样式隔离 / 跨域导致字体文件没被正确加载。按下面顺序改，

1、`entry` 要用源地址（不要带 `#`）

entry 是要去拉子应用 index.html 的地址，不要写路由 hash。

const app = loadMicroApp({
  name: 'app1',
  entry: 'http://127.0.0.1:8081/',   //  正确；不要 'http://127.0.0.1/#/'
  container: '#micro-container',
  props: { userInfo: resp.data },
  sandbox: { experimentalStyleIsolation: true } // 见第3点，可切换验证
})

端口按你的子应用 devServer 实际端口改。

2、子应用必须启用 runtime publicPath

否则 css/js/字体会当成“相对主应用”的路径去请求，导致 404 或请求错域。

子应用：
src/public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

src/main.js 顶部第一行：

import './public-path'

vue.config.js

webpack v4:

const packageName = require('./package.json').name;

module.exports = {
  publicPath: '/',  // 让资源走运行时 publicPath
  devServer: {
    port: 8081,
    headers: { 'Access-Control-Allow-Origin': '*' } // 见第4点
  },
  configureWebpack: {
    output: {
      library: `${packageName }-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName }`,
    }
  }
}

webpack v5：

const packageName = require('./package.json').name;

module.exports = {
  publicPath: '/',  // 让资源走运行时 publicPath
  devServer: {
    port: 8081,
    headers: { 'Access-Control-Allow-Origin': '*' } // 见第4点
  },
  configureWebpack: {
    output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    }
  }
}

3、样式隔离与外链字体

experimentalStyleIsolation 开启后用 Shadow DOM，有些 外链的 css 里相对 url 字体可能失效。

先切换验证：
- 如果你现在开着：改为 sandbox: { experimentalStyleIsolation: false }
- 如果你现在关着：尝试开成 true
长期修复任选其一：
- 把图标 CSS 走打包（import 'element-ui/lib/theme-chalk/index.css' 或本地化 iconfont.css），让 webpack 处理 url()，自动拼上 publicPath。
- 或把 iconfont 换成 CDN 绝对地址（https/同域），避免相对路径。