Jak poprawnie ustawić favicon.ico w projekcie webpack vue.js?

94

Stworzyłem vue webpackprojekt przy użyciu vue-cli.

vue init webpack myproject

Następnie uruchomiłem projekt w devtrybie:

npm run dev

Mam ten błąd:

Nie udało się załadować zasobu: serwer odpowiedział statusem 404 (Nie znaleziono) http: // localhost: 8080 / favicon.ico

Jak więc w pakiecie internetowym favicon.icopoprawnie zaimportować plik?

html ecmascript-6 webpack vue.js favicon Alfred Huang
źródło
1
Czy próbowałeś po prostu upuścić go w katalogu głównym witryny? :) Lub w publicznym folderze kompilacji?
Benjamin,

Odpowiedzi:

154

Sprawdź strukturę projektu szablonu pakietu internetowego: https://vuejs-templates.github.io/webpack/structure.html

Należy pamiętać, że istnieje folder statyczne, wraz z node_modules, srcitp

Jeśli umieścisz jakiś obraz w staticfolderze, na przykład favicon.png, zostanie on udostępniony pod adresem http: // localhost: 8080 / static / favicon.png

Oto dokumentacja dotycząca zasobów statycznych: https://vuejs-templates.github.io/webpack/static.html

W przypadku problemu z ikoną favicon możesz umieścić favicon.icolub favicon.pngw staticfolderze i odnieść się do pliku <head>index.html w następujący sposób:

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

Jeśli nie zdefiniujesz a favicon.icow swoim index.html, przeglądarka poprosi o favicon z katalogu głównego strony (zachowanie domyślne). Jeśli określisz favicon jak powyżej, nie zobaczysz już tego błędu 404. Ikona ulubionych zacznie się również pojawiać na kartach przeglądarki.

Na marginesie, oto powód, dla którego wolę PNG zamiast pliku ICO:

favicon.png vs favicon.ico - dlaczego powinienem używać PNG zamiast ICO?

Mani
źródło
1
co zrobić, jeśli chcę zachować moją ulubioną ikonę w źródle / zasobach? najlepiej pozostawić go w folderze statycznym wraz z .gitkeep?
Akin Hwan
4
@AkinHwan Jeszcze tego nie próbowałem, ale jeśli zachowasz jakikolwiek obraz w src / assetach, zostanie on potraktowany jako zależność modułu i przejdzie do końcowego pliku kompilacji jako obraz wbudowany (format base64). Spowoduje to niepotrzebne zwiększenie rozmiaru kompilacji. Nie ma się co martwić, nie wpłynie to w żaden sposób na wydajność. Wolę zachować obrazy jako „rzeczywiste zasoby statyczne”, jak wyjaśniono w dokumentacji . Twoje preferencje mogą się różnić. Musisz wypróbować obie metody i wybrać tę, która będzie dla Ciebie odpowiednia.
Mani
8
Ta odpowiedź wydaje się nieco nieaktualna. W aktualnym szablonie vue webpack istnieje katalog publiczny , a nie katalog statyczny .
JakeParis
@JakeParis również, używając „skrótu” w linku rel, jest używane tylko w przeglądarce Internet Explorer.
Caine Nielsen
4

Mała aktualizacja dla Laravel 5.x, umieść swój favicon.icolub favicon.pngw /publicfolderze i odnieś się do niego w index.htmlten sposób:

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

Mam nadzieję, że to pomoże !

ósma Bila
źródło
4

Z jakiegoś powodu powyższe rozwiązania nie działały u mnie przed konwersją domyślnego favicon.icopliku na favicon.pngi zmianą jego nazwy na favicon-xyz.pngnp. (Umieściłem ten plik w /publicfolderze) i edytując index.htmlplik w następujący sposób:

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

Może się komuś przyda.

tjurkan
źródło