官网解决办法
- 所有图片等静态资源上传至
cdn,css中直接引用cdn地址(推荐) - 借助
webpack的url-loader将字体文件和图片打包成base64(适用于字体文件和图片体积小的项目)(推荐)
官网解决办法跳转:微应用打包之后 css 中的字体文件和图片加载 404
第三种方法
可以通过重写 qinakun 的 fetch 方法直接修改请求到的 css 文件里的资源路径
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 文件是相对路径

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