我使用vue-cli 创建了一个vue webpack 项目。
vue init webpack myproject
然后在dev模式下运行项目：
npm run dev
我收到了这个错误：
加载资源失败：服务器响应状态为 404（未找到）http://localhost:8080/favicon.ico
那么在webpack里面，如何正确导入favicon.ico呢？
【问题讨论】：
标签： html vue.js webpack favicon
Laravel 5/6/7/8 的小更新，将您的 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>
希望对你有帮助！
【讨论】：
由于某种原因，在将默认的 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>
可能对某人有用。
【讨论】：
查看 webpack 模板的项目结构：https://vuejs-templates.github.io/webpack/structure.html
注意有一个静态文件夹，还有node_modules、src等。
如果您将一些图像放入static 文件夹中，例如favicon.png，它将在http://localhost:8080/static/favicon.png 上提供
这里是静态资产的文档：https://vuejs-templates.github.io/webpack/static.html
对于您的网站图标问题，您可以将favicon.ico 或favicon.png 放入static 文件夹中，并在您的index.html 的<head> 中引用如下：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
如果您没有在index.html 中定义favicon.ico，则浏览器将从网站根目录请求一个网站图标（默认行为）。如果您如上所述指定网站图标，您将不会再看到 404。 favicon 也将开始显示在您的浏览器选项卡中。
顺便说一句，这就是我更喜欢 PNG 而不是 ICO 文件的原因：
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
【讨论】：