URIError：无法解码参数“/%PUBLIC_URL%/favicon.ico”

Question

我是 webpack 的新手，我让 babel loader 和 css loader 工作并且项目编译成功，但是当我尝试通过浏览器访问时，出现以下错误。看起来好像 PUBLIC_URL 无法识别。我相信我不知道如何配置它。

感谢您宝贵的 cmets。

谢谢

ℹ ｢wdm｣: Compiled successfully. URIError: Failed to decode param 
'/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at 
decode_param (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:172:12) at Layer.match 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:123:27) at matchLayer 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:574:18) at next 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:220:15) at expressInit 
(/home/mike/finance- 
grapher/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle 
[as handle_request] (/home/mike/finance- 
grapher/node_modules/express/lib/router/layer.js:95:5) at trim_prefix 
(/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:317:13) at 
/home/mike/finance-grapher/node_modules/express/lib/router/index.js:284:7 
at Function.process_params (/home/mike/finance- 
grapher/node_modules/express/lib/router/index.js:335:12)

Webpack.config.js

.babelrc

package.json

project folder structure

Answer 1

问题已修复 第1步） 使用实际路径删除 %PUBLIC_URL%。 %PUBLIC_URL%/favicon.ico 与 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,
            },
          },
        ],
     }

Answer 2

<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]']
},

Answer 3

快速修复

如果您将%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 中添加导入，将 .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。

Answer 4

我遇到了同样的问题并用以下方法解决了它：

在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.