快速解决

如果要替换%PUBLIC_URL%为实际路径怎么办。我认为 Babel 在转译%. 尝试替换%PUBLIC_URL%/favicon.ico为/public/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 中添加导入将 .ico 资源复制到dist目录。import '../public/favicon.ico';

在你的 index.html 中；<link rel="shortcut icon" href="favicon.ico">使用您的图标。不再需要提供路径，因为它将被复制到dist目录

或者：

除了上面提到的添加到webpack.config.js的规则之外，根据您的设置，将插件添加到 webpack 配置可能是更好的方法。

对我来说，这看起来像是将 npm 包html-webpack-plugin 添加到项目中。然后在 webpack 配置中要求它；const HtmlWebpackPlugin = require('html-webpack-plugin');. 然后添加plugins到module.exports.

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

走这条路线并在 webpack 配置中完成工作意味着将不再需要添加到App.js以导入 favicon.ico的行。

编辑：正如@Tolumide 所提到的

不要忘记为每个环境适当地配置webpack.config。

我遇到了同样的问题并使用以下方法修复了它：

在数组中的 webpack.config.js 中plugins，添加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Ø与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]']
},