如何在vue.js webpack项目中正确设置favicon.ico？ [英] How to set favicon.ico properly on vue.js webpack project?
问题描述
我已经使用 vue-cli 创建了一个 vue webpack 项目。
I have created a vue webpack project using vue-cli.
vue init webpack myproject
然后在 dev下运行项目模式：
npm run dev
我收到此错误：
无法加载资源：服务器回复状态为404（未找到） http：// localhost：8080 /favicon.ico
所以在webpack里面，如何导入 favicon.ico 正确？
So inside webpack, how to import the favicon.ico correctly?
推荐答案
查看webpack模板的项目结构： a href =https://vuejs-templates.github.io/webpack/structure.html =noreferrer> https://vuejs-templates.github.io/webpack/structure.html
Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html
请注意，有一个静态文件夹以及 node_modules ， src 等。
Note that there is a static folder, along with node_modules, src, etc.
如果您将某些图像放入 static 文件夹中， favicon.png ，将在 http： //localhost:8080/static/favicon.png
If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png
以下是静态资产的文档： https://vuejs-templates.github.io/webpack/static.html
Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html
对于您的favicon问题，您可以将 favicon.ico 或 favicon.png $ c> static 文件夹，并在index.html的< head> 中引用，如下所示：
For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:
<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。图标也将在您的浏览器标签中开始显示。
If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.
作为附注，这里是为什么我更喜欢PNG而不是ICO文件的原因：
As a side note, here is the reason why I prefer PNG instead of ICO file:
favicon.png vs favicon.ico - 为什么要使用PNG而不是ICO？
这篇关于如何在vue.js webpack项目中正确设置favicon.ico？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http： //localhost:8080/static/favicon.png](\"http://localhost:8080/static/favicon.png\"){kind=link}