Alf*_*ang 84 html favicon ecmascript-6 webpack vue.js
我用了创建了一个vue webpack项目vue-cli.
vue init webpack myproject
然后在dev模式下运行项目:
npm run dev
我收到了这个错误:
无法加载资源:服务器响应状态为404(未找到)http:// localhost:8080/favicon.ico
所以在webpack里面,如何favicon.ico正确导入？
Man*_*ani 131
查看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或一个或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在自己中定义a index.html,则浏览器将从网站根目录请求favicon(默认行为).如果您指定上面的favicon,则不会再看到404.favicon也将开始显示在您的浏览器标签中.
作为旁注,这就是我更喜欢PNG而不是ICO文件的原因:
favicon.png vs favicon.ico - 我为什么要使用PNG而不是ICO？
tju*_*kan 12
出于某种原因，在将默认favicon.ico文件转换为favicon.png并将其重命名为favicon-xyz.pngeg（我已将此文件放在/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>
希望能帮助到你 ！
截至 2022 年，@Mani 答案有点过时，因为静态资产现在在.publicstatic
只需生成一个.icofavicon文件（本站提供免费的在线favicon生成），将其重命名为favicon.ico并将其放入public文件夹中，无需更改index.html，重新加载即可显示新的favicon。