执行npm run build:prod命令时遇font-awesome字体文件加载错误求助

云上老周

2026-5-28

解决font-awesome字体文件loader缺失问题

嘿，这个问题我之前也碰到过！本质就是webpack不知道怎么处理.ttf这类字体文件，得给它配上合适的loader才行，给你一步步来的解决办法：

第一步，先安装需要的loader。推荐用file-loader（专门处理静态资源文件），在终端跑这个命令：
```
npm install file-loader --save-dev
```
要是你想把小体积的字体文件转成base64嵌入到代码里（减少请求），也可以用url-loader，安装命令是：
```
npm install url-loader --save-dev
```

第二步，修改你的webpack配置文件（一般是webpack.config.js或者生产环境对应的配置文件，比如webpack.prod.config.js）。找到module.rules部分，添加处理字体文件的规则：

module.exports = {
  // 这里是你已有的其他配置项
  module: {
    rules: [
      // 保留你原来的css、sass等loader规则，比如处理font-awesome sass的那些
      // 添加下面这一段字体文件处理规则
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/', // 打包后字体文件放到dist下的fonts目录里
              name: '[name].[ext]' // 保持原文件名和后缀不变
            }
          }
        ]
      }
      // 要是用url-loader的话，就换成下面这段配置：
      // {
      //   test: /\.(woff|woff2|eot|ttf|otf)$/,
      //   use: [
      //     {
      //       loader: 'url-loader',
      //       options: {
      //         limit: 8192, // 小于8KB的字体文件转成base64，大于的话还是用file-loader输出
      //         outputPath: 'fonts/'
      //       }
      //     }
      //   ]
      // }
    ]
  }
};