我已经创建了一个vue webpack项目使用vue cli。
vue init webpack myproject
然后在dev模式下运行项目：
npm run dev
我得到了这个错误：
加载资源失败：服务器响应状态为404（未找到）http://localhost:8080/favicon.ico
那么在webpack里面，如何正确导入favicon.ico呢？
查看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问题，您可以放置一个favicon。ico或法维康。png进入静态文件夹，并在
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
如果未定义favicon。在您的，则浏览器将从网站根目录请求favicon（默认行为）。如果您如上所述指定favicon，您将不再看到404。favicon也将开始显示在您的浏览器选项卡中。索引中输入ico。html
作为旁注，以下是我喜欢PNG而不是ICO文件的原因：
法维康。png对favicon。ico-为什么我应该使用PNG而不是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的小更新，将您的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>
希望有帮助！
