快速修复

如果你用实际的路径替换%PUBLIC_URL%会怎么样？我认为Babel在传递%时有问题。尝试用/public/favicon.ico替换%PUBLIC_URL%/favicon.ico，问题就解决了。

更好地修复

将新规则添加到webpack.config.js。

//...
{
  test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
  exclude: /node_modules/,
  use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...

然后，通过在App.js. import '../public/favicon.ico';中添加导入，将.ico资源复制到dist目录
在您的index.html中; <link rel="shortcut icon" href="favicon.ico">以使用您的图标。不再需要提供路径，因为它将被复制到dist目录
或：
除了上面提到的添加到webpack.config.js的规则之外，根据您的设置，添加插件到webpack config可能是一个更好的方法。
对我来说，这看起来像是将npm包html-webpack-plugin添加到项目中，然后在webpack配置中要求它;然后将plugins加到module.exports上。

//...
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    filename: './index.html',
    favicon: './public/favicon.ico'
  })
]
//...

走这条路并在webpack配置中进行工作意味着不再需要在App.js中添加行来导入favicon.ico。
编辑：如@托鲁米特所述
不要忘记根据环境相应地配置 webpack.config。

我遇到了同样的问题，并通过以下方法修复了它：
在plugins数组中的webpack.config.js内，添加HtmlWebpackPlugin和InterpolateHtmlPlugin

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),

      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)

这是InterpolateHtmlPlugin的文档

Makes some environment variables available in index.html.
The public URL is available as %PUBLIC_URL% in index.html, e.g.:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
In production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that URL.
In development, this will be an empty string.

问题已修复步骤1）使用实际路径删除%PUBLIC_URL%。%PUBLIC_URL%/favicon.ic o使用favicon.ico之前<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />之后<link rel="icon" href="favicon.ico" />

步骤2）将此规则添加到webpack.config.js

plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public", "index.html"),
    favicon: "./public/favicon.ico",
    filename: "index.html",
    manifest: "./public/manifest.json",
  })]

步骤3）在webpack中添加SVG支持（重要）安装svg-url-loader包

{
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
     }

<link href="<%= htmlWebpackPlugin.options.favicon %>" rel="shortcut icon">

和

new HtmlWebpackPlugin({
   favicon: "image/favicon.ico",
})

和

{
  test: /\.(jpe?g|gif|png|ico)$/,
  use: ['file-loader?name=[name].[ext]']
},

解决方案

1. npm安装插入-html-插件--保存-dev
   1.添加到Webpack配置中的插件列表
   new InterpolateHtmlPlugin({PUBLIC_URL: 'static })

当我从Express服务器提供页面时，我从create-react-app得到这个错误。这是因为我从public文件夹而不是build文件夹提供静态页面。
不工作的：
app.use('/', express.static(path.join(__dirname, '../public')));
工作中
app.use('/', express.static(path.join(__dirname, '../build')));