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.ic
o 与 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,
,
,
],
【讨论】:
【参考方案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 中; <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。
【讨论】:
如果您对两种环境使用不同的设置,请记住为开发或生产执行相同的操作 我在每个环境中使用不同的配置;我的监督不包括在内。感谢您提及!我会更新答案。【参考方案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.
【讨论】:
以上是关于URIError:无法解码参数“/%PUBLIC_URL%/favicon.ico”的主要内容,如果未能解决你的问题,请参考以下文章
URIError: 无法解码参数 '/<myusername>/<projectname>/%PUBLIC_URL%/manifest.json'
Webpack URIError:无法解码参数'/%PUBLIC_URL%/favicon.ico'