如何在 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模式下运行项目:
And then ran the project under dev mode:
npm run dev
我收到此错误:
加载资源失败:服务器响应状态为 404(未找到)http://localhost:8080/favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
那么在webpack里面，如何正确导入favicon.ico?
So inside webpack, how to import the favicon.ico correctly?
推荐答案
查看webpack模板的项目结构: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 放入 static 文件夹并在 中引用> 你的 index.html 如下:
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>
如果您没有在 index.html 中定义 favicon.ico，那么浏览器将从网站根目录请求一个 favicon(默认行为).如果您按上述方式指定网站图标，您将不会再看到 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.pngvs favicon.ico - 为什么我应该使用 PNG 而不是 ICO?
这篇关于如何在 vue.js webpack 项目中正确设置 favicon.ico?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
