解决qiankun框架子应用打包后css里的图片加载404失败问题

passerma2026-01-11 9:10

详细实现方式请前往https://www.passerma.com/article/93

官网解决办法

所有图片等静态资源上传至 cdn，css 中直接引用 cdn 地址（推荐）
借助 webpack 的 url-loader 将字体文件和图片打包成 base64（适用于字体文件和图片体积小的项目）（推荐）

官网解决办法跳转：微应用打包之后 css 中的字体文件和图片加载 404

第三种方法

可以通过重写 qinakun 的 fetch 方法直接修改请求到的 css 文件里的资源路径

javascript 复制代码

function rewriteCssUrls(cssContent: string, baseUrl: string) {
  return cssContent.replace(
    /url\((?:'|")?(.*?)['"]?\)/g,
    (match, p1) => {
      const url = p1.trim();

      // 已经是 base64 / http(s) / protocol-relative，不处理
      if (/^(?:data:|https?:\/\/|\/\/)/i.test(url)) {
        return match;
      }

      const urlObj = new URL(url, baseUrl);

      return `url(${urlObj.href})`;
    }
  );
}

registerMicroApps([
  {
    name: 'sub1',
    entry: 'http://127.0.0.1:5500/dist/',
    container: '#sub1',
    activeRule: () => true,
  }
]);

start({
  fetch: (url, opt) => {
    return fetch(url, opt).then(async response => {
      let responseText = await response.text();
      const urlObj = new URL(url.toString());
      if (urlObj.pathname.endsWith('.css')) {
        responseText = rewriteCssUrls(responseText, urlObj.href.split('/').slice(0, -1).join('/') + '/');
      }
      return new Response(responseText, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers,
      });
    });
  }
});

可以看到实际加载的文件已经是正确目录了

原始 css 文件是相对路径

修改过后实际引入的是相对于子应用的路径了

详细实现方式请前往https://www.passerma.com/article/93