URIError:无法解码参数'/%PUBLIC_URL%/favicon.ico' [英] URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

问题描述

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

I am new to webpack and I got the babel loader and css loader to work and project compiles successfully but when I try to access via browser I get the below error. It looks as if PUBLIC_URL is not recognized. I believe I don't know how to configure this.

感谢您的宝贵意见.

谢谢

ℹ ｢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

项目文件夹结构

推荐答案

快速修复

如果将%PUBLIC_URL%替换为实际路径该怎么办.我认为Babel在转换%时遇到问题.尝试将%PUBLIC_URL%/favicon.ico替换为/public/favicon.ico，此问题已解决.

Quick fix

What if you were to replace %PUBLIC_URL% with the actual path. I think that Babel is having issues transpiling the %. Try replacing %PUBLIC_URL%/favicon.ico with /public/favicon.ico and the issue is resolved.

向您的webpack.config.js添加新规则.

Add a new rule to your 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';

Then have the .ico resource copied to the dist directory by adding an import in your App.js. import '../public/favicon.ico';

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

In your index.html; <link rel="shortcut icon" href="favicon.ico"> to make use of your icon. No longer need to provide a path since it will be copied to the dist directory

OR:

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

In addition to the rule added to the webpack.config.js mentioned above, adding plugins to the webpack config may be a better way to go depending on your setup.

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

For me this looks like adding the npm package html-webpack-plugin to the project. Then requiring it in the webpack config; const HtmlWebpackPlugin = require('html-webpack-plugin');. Then adding plugins to the module.exports.

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

沿着这条路线并在webpack配置中进行工作意味着不再需要添加到 App.js 的行来导入favicon.ico.

Going this route and doing the work in the webpack config means the line added to the App.js to import the favicon.ico will no longer be necessary.

如@Tolumide所述

As mentioned by @Tolumide

请不要忘记根据环境适当配置 webpack.config .

这篇关于URIError:无法解码参数'/%PUBLIC_URL%/favicon.ico'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！