Javascript React生成无法正确加载字体

在开发模式中，字体和所有资产都由React成功加载。当我创建项目的构建并将其上载到基于express的服务器时，问题就出现了：应用程序在错误的目录中查找字体，因此没有找到它们。相反，图像加载正确，并且需要加载到此URL:/static/media。 在此目录中搜索字体：/static/css/static/media；当然，这是错误的，因为生产中的字体位于加载图像的同一文件夹中，并且搜索的路径不存在

字体以以下方式加载到scss文件中：

@font-face {
  font-family: 'Rawson';
  src: url("../assets/fonts/RawsonPro-Medium.otf") format('opentype');
  font-weight: 500;
}

我知道还有其他类似的问题，特别是在github上，但我无法真正解决它。通过更新react脚本包和使用“homepage”属性，许多问题似乎已经解决

  "homepage": "./"

虽然我已经这样做了，但我找不到解决办法。

---

感谢那些决定帮助我的人。

在您的网页配置中测试它

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  watch: true
}

---

它应该在您在webpack中编写的out文件路径中创建，并对其进行配置测试

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  watch: true
}

---

它应该在您编写的输出文件路径中创建

您的构建设置是什么？您正在使用CreateReact应用程序吗？基本上，您希望构建生成适合您的部署环境的路径。例如，如果您的应用部署在，那么您的资产应该相对于根（/）。然而，如果您的应用部署在，则您的资产应指向/app。如果您使用CreateReact应用程序，主页将用于确定路径：@Hans是的，我正在使用CreateReact应用程序。我的react应用程序适用于任何服务器路由（除了专用于API的路由），因此资产应该是相对于根/的。我不明白的是，加载字体时出现此react错误的原因是什么，因为搜索字体的目录（/static/css/static/media）完全错误，与真实字体（/static/media）无关。我认为问题在于CSS中处理相对路径的方式，但我不希望弹出我的应用程序，因此我无法访问网页包配置（至少我认为是这样）。啊，对不起，我误解了这个问题。因此，这是一个Web包加载器如何解析URL的问题。我不知道解决方案是什么，但看看文档，可能URL必须以

/

（）开头。您的构建设置是什么？您正在使用CreateReact应用程序吗？基本上，您希望构建生成适合您的部署环境的路径。例如，如果您的应用部署在，那么您的资产应该相对于根（/）。然而，如果您的应用部署在，则您的资产应指向/app。如果您使用CreateReact应用程序，主页将用于确定路径：@Hans是的，我正在使用CreateReact应用程序。我的react应用程序适用于任何服务器路由（除了专用于API的路由），因此资产应该是相对于根/的。我不明白的是，加载字体时出现此react错误的原因是什么，因为搜索字体的目录（/static/css/static/media）完全错误，与真实字体（/static/media）无关。我认为问题在于CSS中处理相对路径的方式，但我不希望弹出我的应用程序，因此我无法访问网页包配置（至少我认为是这样）。啊，对不起，我误解了这个问题。因此，这是一个Web包加载器如何解析URL的问题。我不知道解决方案是什么，但看一下文档，可能是URL必须以

/

（）开头，谢谢您的兴趣@tmohammad78，但我不想弹出我的应用程序（由create react app生成），因此我认为我无法访问网页包配置（我在此范围内是新手，如果我错了请纠正我）。感谢您对@tmohammad78的关注，但我不希望弹出我的应用程序（使用create react app生成），因此我认为我无法访问网页包配置（我在此范围内是新手，如果我错了请纠正我）。