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

Question

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

项目文件夹结构

原文由 mousa rashid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

快速解决

如果您要用实际路径替换 %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 。

原文由 Rockin4Life33 发布，翻译遵循 CC BY-SA 4.0 许可协议