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

问题

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: '/',  // 让资源走运行时 publicPathdevServer: {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: '/',  // 让资源走运行时 publicPathdevServer: {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/同域），避免相对路径。

---