Vue.js web paketi projesinde favicon.ico nasıl doğru şekilde ayarlanır?

Question 1

vue webpackKullanarak bir proje oluşturdum vue-cli.

vue init webpack myproject

Ve sonra projeyi devmod altında çalıştırın :

npm run dev

Bu hatayı aldım:

Kaynak yüklenemedi: sunucu yanıt verdi 404 (Bulunamadı) http: // localhost: 8080 / favicon.ico

Peki web paketinin içinde, favicon.icodoğru şekilde nasıl içe aktarılır ?

Question 2

Web paketi şablonunun Proje Yapısına göz atın: https://vuejs-templates.github.io/webpack/structure.html

Statik bir klasör ile birlikte olduğu Not node_modules, srcvb

staticKlasöre bir resim koyarsanız , örneğin http: // localhost: 8080 / static / favicon.png adresindefavicon.png kullanıma sunulacaktır.

Statik varlıklar için belgeler: https://vuejs-templates.github.io/webpack/static.html

Senin favori simge sorunu, bir koyabilirsiniz favicon.icoveya favicon.pngiçine staticklasör ve içinde başvurmak <head>aşağıdaki gibi index.html 'nin:

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

Eğer bir tanımlama yoksa favicon.icoGözlerinde farklı index.html, tarayıcı web sitesi kökü (varsayılan davranış) bir favicon olmasını isteyecektir. Yukarıdaki gibi bir favicon belirtirseniz, o 404'ü artık görmeyeceksiniz. Favicon, tarayıcı sekmelerinizde de görünmeye başlayacaktır.

Yan not olarak, ICO dosyası yerine PNG'yi tercih etmemin nedeni şudur:

favicon.png vs favicon.ico - neden ICO yerine PNG kullanmalıyım?

Question 3

Laravel 5.x için küçük güncelleme, yerinizi favicon.icoveya favicon.pngiçine /publicklasöründe ve kendisine atıfta index.htmlböyle:

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

Umarım yardımcı olur !

Question 4

Bazı nedenlerden dolayı, yukarıdaki çözümler, varsayılan favicon.icodosyayı dönüştürmeden favicon.pngve favicon-xyz.pngörneğin yeniden adlandırmadan önce benim için işe yaramadı (bu dosyayı /publicklasöre koydum ) ve index.htmldosyayı aşağıdaki gibi düzenledim :

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

Birisi için faydalı olabilir.