umi qiankun 微应用打包之后 css 中的字体文件不显示或404

pingwei_deng

于 2023-01-06 13:55:43 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： umi qiankun 文章标签：前端 react qiankun umi javascript

本文链接：https://blog.csdn.net/pingwei_deng/article/details/128577532

qiankun 同时被 2 个专栏收录

2 篇文章

订阅专栏

umi

1 篇文章

订阅专栏

由于qiankun将外链样式转换为内联样式，导致字体文件路径失效。通过配置webpack的file-loader，设置静态资源的publicPath为http://XXX.XXX.XXX.XXX:9999/，解决了css打包后字体文件路径动态修改的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因：字体文件的加载路径是相对地址，qiankun将外链样式改为了内联样式，css文件打包后，无法通过 publicPath 来动态的修改字体文件路径。

解决：

export default defineConfig({
    chainWebpack(config) {
        const fontRule = config.module.rule('fonts');
        fontRule.uses.clear();
        fontRule
          .use('file-loader')
          .loader('file-loader')
          .options({
            name: 'static/fonts/[name].[hash:8].[ext]',
            publicPath: 'http://XXX.XXX.XXX.XXX:9999/',
          })
          .end();
  },
})