我已经使用 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
请注意，有一个静态文件夹，以及 node_modules , src等
如果你将一些图像放入 static文件夹，例如 favicon.png , 它将在 http://localhost:8080/static/favicon.png 提供
这是静态 Assets 的文档:https://vuejs-templates.github.io/webpack/static.html
对于您的网站图标问题，您可以输入 favicon.ico或 favicon.png进入static文件夹并引用 <head>你的 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>
如果你没有定义 favicon.ico在你的index.html ，然后浏览器将从网站根目录请求一个图标(默认行为)。如果你像上面那样指定一个图标，你将不会再看到那个 404。网站图标也将开始显示在您的浏览器选项卡中。
作为旁注，这是我更喜欢 PNG 而不是 ICO 文件的原因:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
关于html - 如何在 vue.js webpack 项目上正确设置 favicon.ico？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40190524/