如何在vue.js Webpack项目上正确设置favicon.ico？

html HTML

神奇伽罗Itachi

2020-03-10

我使用创建了一个vue webpack项目vue-cli。

vue init webpack myproject

然后在dev模式下运行项目：

npm run dev

我收到此错误：

加载资源失败：服务器响应状态为404（未找到）http：// localhost：8080 / favicon.ico

那么在webpack中，如何favicon.ico正确导入？

第452篇《如何在vue.js Webpack项目上正确设置favicon.ico？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
神奇古一 2020.03.10

Laravel 5.x的小更新，将您的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>

希望能帮助到你 ！

西里前端Tom 2020.03.10

查看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文件夹中，<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-为什么我应该使用PNG而不是ICO？

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android