Angular14微前端（Webpack5 Module Federation+ngx-build-plus）字体资源路径404问题求助

架构老林

2026-4-23

嗨，我之前在做Angular微前端的时候也碰到过一模一样的资源路径问题，给你几个亲测有效的解决方案，你可以挨个试试：

修改Angular构建的baseHref配置
你可以直接在构建命令里加上--base-href /my-webco/参数，或者在angular.json的build配置项里固定设置这个值：
```
"build": {
  "builder": "ngx-build-plus:browser",
  "options": {
    "baseHref": "/my-webco/",
    // 其他已有的配置内容...
  }
}
```
这样Angular在打包时会自动给所有资源的引用路径加上/my-webco/前缀，字体文件就会从正确的https://my-host/my-webco/icon-font.woff路径加载了。
自定义Webpack配置设置publicPath
因为你用了ngx-build-plus，可以通过额外的Webpack配置来指定资源的基础路径：
1. 先在项目根目录创建一个webpack.extra.js文件，内容如下：
```
module.exports = {
  output: {
    publicPath: '/my-webco/'
  }
};
```
2. 然后修改angular.json里的build配置，引入这个额外的Webpack配置：
```
"build": {
  "builder": "ngx-build-plus:browser",
  "options": {
    "extraWebpackConfig": "./webpack.extra.js",
    // 其他已有的配置内容...
  }
}
```
Webpack的publicPath会作为所有打包后资源的路径前缀，能直接解决字体这类静态资源的路径问题。
检查CSS中字体的引用写法
最后可以检查一下你的样式文件里字体的引用路径，确保用的是相对路径而不是绝对路径：
```
@font-face {
  font-family: 'IconFont';
  src: url('./icon-font.woff2') format('woff2'),
       url('./icon-font.woff') format('woff');
}
```
避免使用以/开头的绝对路径，这样Webpack在打包时才能根据前面设置的baseHref或publicPath来生成正确的资源路径。