Question

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

vue init webpack myproject

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

npm run dev

我收到了这个错误：

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

所以在webpack中，如何正确导入favicon.ico？

Answer 1

查看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文件夹并引用index.html的<head>，如下所示：

<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，则浏览器将从网站根目录请求图标（默认行为）。如果您指定上面的favicon，则不会再看到404。 favicon也将开始显示在您的浏览器标签中。

作为旁注，这就是为什么我更喜欢PNG而不是ICO文件的原因：

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Answer 2

由于某种原因，在将默认favicon.ico文件转换为favicon.png并将其重命名为favicon-xyz.png之前，上述解决方案对我不起作用，例如（我已将此文件放在/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>

可能对某人有用。

Answer 3

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>

希望有帮助！

如何在vue.js webpack项目中正确设置favicon.ico？

3 个答案: