Wie setze ich favicon.ico richtig in vue.js Webpack-Projekt?

91

Ich habe ein vue webpackProjekt mit erstellt vue-cli.

vue init webpack myproject

Und dann lief das Projekt im devModus:

npm run dev

Ich habe diesen Fehler erhalten:

Fehler beim Laden der Ressource: Der Server antwortete mit dem Status 404 (nicht gefunden) http: // localhost: 8080 / favicon.ico

Also, wie man im Webpack das favicon.icorichtig importiert ?

html ecmascript-6 webpack vue.js favicon Alfred Huang
quelle
1
Haben Sie versucht, es einfach im Stammverzeichnis der Website abzulegen? :) Oder im öffentlichen Build-Ordner?
Benjamin

Antworten:

148

Überprüfen Sie die Projektstruktur der Webpack-Vorlage: https://vuejs-templates.github.io/webpack/structure.html

Beachten Sie, dass es ein statischer Ordner ist, zusammen mit node_modules, srcetc.

Wenn Sie ein Bild in den staticOrdner legen favicon.png, wird es unter http: // localhost: 8080 / static / favicon.png verfügbar gemacht

Hier ist die Dokumentation für statische Assets: https://vuejs-templates.github.io/webpack/static.html

Für Ihr Favicon-Problem können Sie ein favicon.icooder favicon.pngin den staticOrdner einfügen und in der <head>Datei index.html wie folgt darauf verweisen :

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Wenn Sie favicon.icoin Ihrem kein definieren index.html, fordert der Browser ein Favicon vom Website-Stammverzeichnis an (Standardverhalten). Wenn Sie wie oben ein Favicon angeben, wird dieser 404 nicht mehr angezeigt. Das Favicon wird auch in den Registerkarten Ihres Browsers angezeigt.

Als Randnotiz ist hier der Grund, warum ich PNG anstelle von ICO-Datei bevorzuge:

favicon.png vs favicon.ico - warum sollte ich PNG anstelle von ICO verwenden?

Mani
quelle
1
Was ist, wenn ich mein Favicon in src / Assets behalten möchte? ist es am besten, es zusammen mit .gitkeep im statischen Ordner zu belassen?
Akin Hwan
4
@AkinHwan Ich habe dies noch nicht versucht, aber wenn Sie ein Image in src / assets behalten, wird es als Modulabhängigkeit behandelt und als Inline-Image (Base64-Format) in die endgültige Build-Datei übernommen. Dies erhöht die Build-Größe unnötig. Kein Grund zur Sorge, die Leistung wird in keiner Weise beeinträchtigt. Ich bevorzuge es, Bilder als "echte statische Assets" zu behalten, wie in den Dokumenten erläutert . Ihre Vorlieben können variieren. Sie müssen beide Methoden ausprobieren und die für Sie geeignete auswählen.
Mani
6
Diese Antwort scheint etwas veraltet zu sein. In der aktuellen vue-Webpack-Vorlage gibt es ein öffentliches Verzeichnis, kein statisches Verzeichnis.
JakeParis
4

Kleines Update für Laravel 5.x, lege dein favicon.icooder favicon.pngin den /publicOrdner und verweise darauf index.htmlwie folgt:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Ich hoffe es hilft !

Eightball
quelle
3

Aus irgendeinem Grund haben die oben genannten Lösungen nicht für mich arbeiten , bevor die Standard Umwandlung favicon.icoDatei favicon.pngund Umbenennung es favicon-xyz.pngzB (ich habe diese Datei in setzen /publicOrdner) und die bearbeitete index.htmlDatei wie folgt:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Könnte für jemanden nützlich sein.

tjurkan
quelle