时间戳

首页 > 解决方案 > URIError：无法解码参数“/%PUBLIC_URL%/favicon.ico”

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

问题描述

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

感谢您的宝贵意见。

谢谢

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

包.json

项目文件夹结构

标签： node.jsreactjswebpackbabeljs

解决方案

快速解决

如果您要替换%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 。

推荐阅读