问题:
使用qiankun微前端库的时候,加载的子应用使用了element-ui的字体图标,子应用在独立运行时,字体图标可以正常显示,而在被父应用加载时,字体图标显示不出来。
Chrome的console中出现如下警告:
Failed to decode downloaded font: https://anyshare.aishu.cn/anyshare/static/fonts/element-icons.535877f5.woff
5E9B63FCAF2D440291A55D4DC0887B2C#/:1 OTS parsing error: invalid sfntVersion: 1008821359
解决方案:
1、所有图片等静态资源上传至 cdn,css 中直接引用 cdn 地址(推荐);
2、借助 webpack 的 url-loader 将字体文件和图片打包成 base64(适用于字体文件和图片体积小的项目)(推荐)
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp|woff2?|eot|ttf|otf)$/i,
use: [
{
loader: 'url-loader',
options: {},
},
],
},
],
},
};
3、打包时vue.config.js中加入配置(如下),其作用是将 font文件 编译成 base64 内嵌到css文件 @font-face{font-family:element-icons;src:url(data:font/woff;base64,d09GRgABAAAAAG4oAAsAAAAA:
module.exports = {
chainWebpack: config => {
config.module
.rule("fonts")
.test(/.(ttf|otf|eot|woff|woff2)$/)
.use("url-loader")
.loader("url-loader")
.tap((options) => {
options = {
// limit: 10000,
name: "/static/fonts/[name].[ext]",
};
return options;
});
}
};
原因:
qiankun 将外链样式改成了内联样式,但是字体文件和背景图片的加载路径是相对路径。
而 css 文件一旦打包完成,就无法通过动态修改 publicPath 来修正其中的字体文件和背景图片的路径。