我使用 vue-cli 创建了一个 vue webpack 项目。
vue init webpack myproject
然后在dev模式下运行该项目：
npm run dev
我遇到了这个错误：
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
那么在webpack中，如何正确地导入favicon.ico？
请查看webpack模板项目结构：https://vuejs-templates.github.io/webpack/structure.html
请注意，它包含一个名为static的文件夹，以及node_modules、src等文件夹。
如果您将一些图像文件（如favicon.png）放入static文件夹中，则可以通过http://localhost:8080/static/favicon.png访问到该图像文件。
以下是静态资源的文档：https://vuejs-templates.github.io/webpack/static.html
对于您的favicon问题，您可以将favicon.ico或favicon.png放入static文件夹中，并在index.html的标签中引用它，如下所示：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
另外，我更喜欢使用PNG格式而不是ICO文件，原因可以参考这篇文章：favicon.png vs favicon.ico - why should I use PNG instead of ICO?
由于某种原因，在将默认的favicon.ico文件转换为favicon.png并将其重命名为favicon-xyz.png之前，以上解决方案对我没有起作用（例如我已将此文件放在/public文件夹中），并且按照如下所示编辑了index.html文件：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
.
.
.
</head>
对某些人可能有用。
更新Laravel 5/6/7/8/9，将您的favicon.ico或favicon.png放置于/public文件夹中，并像这样在您的index.html中引用它：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
希望这能帮助到你！
static文件夹中，而是放在public文件夹中。。.ico图标文件（此网站提供免费在线图标生成），将其重命名为favicon.ico并放置在public文件夹中，无需更改index.html，重新加载即可显示新的图标。rel标记中添加shortcut：<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
谢谢。根据eightballs的评论，这个方法很管用。我需要将文件移动到/public文件夹并重命名它:D
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>gear.png">
<title>Prodigy</title>
</head>