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

Posted

技术标签:

【中文标题】URIError:无法解码参数“/%PUBLIC_URL%/favicon.ico”【英文标题】:URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' 【发布时间】:2018-11-22 06:08:50 【问题描述】:

我是 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

【问题讨论】:

您解决过这个问题吗?你会认为基本的 reactjs、webpack 和 babel 配置会更简单...... 【参考方案1】:

问题已修复 第1步) 使用实际路径删除 %PUBLIC_URL%。 %PUBLIC_URL%/favicon.ico 与 favicon.ico 之前 &lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" /&gt; 之后 &lt;link rel="icon" href="favicon.ico" /&gt;

步骤 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,
            ,
          ,
        ],
     

【讨论】:

【参考方案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]']
,

【讨论】:

【参考方案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 中; &lt;link rel="shortcut icon" href="favicon.ico"&gt; 使用您的图标。不再需要提供路径,因为它会被复制到 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

【讨论】:

如果您对两种环境使用不同的设置,请记住为开发或生产执行相同的操作 我在每个环境中使用不同的配置;我的监督不包括在内。感谢您提及!我会更新答案。【参考方案4】:

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

plugins数组的webpack.config.js中,添加HtmlWebpackPluginInterpolateHtmlPlugin

  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.

【讨论】:

以上是关于URIError:无法解码参数“/%PUBLIC_URL%/favicon.ico”的主要内容,如果未能解决你的问题,请参考以下文章

URIError: 无法解码参数 '/<myusername>/<projectname>/%PUBLIC_URL%/manifest.json'

Webpack URIError:无法解码参数'/%PUBLIC_URL%/favicon.ico'

无法通过@RequestParam Spring @RestController 解码 url 查询参数

通过url传参遇到参数为中文无法解码问题

如果视频编解码器参数与“直通”不同,我无法播放转码流

iOS Swift 可解码:错误:无法为没有参数的类型调用初始化程序