Bagaimana cara mengatur favicon.ico dengan benar di proyek webpack vue.js?

Question 1

Saya telah membuat vue webpackproyek menggunakan vue-cli.

vue init webpack myproject

Dan kemudian menjalankan proyek dalam devmode:

npm run dev

Saya mendapat kesalahan ini:

Gagal memuat sumber daya: server menanggapi dengan status 404 (Tidak Ditemukan) http: // localhost: 8080 / favicon.ico

Jadi di dalam webpack, bagaimana cara mengimpor dengan favicon.icobenar?

Question 2

Lihat Struktur Proyek template webpack: https://vuejs-templates.github.io/webpack/structure.html

Perhatikan bahwa ada folder statis, bersama dengan node_modules, src, dll

Jika Anda memasukkan beberapa gambar ke dalam staticfolder, seperti favicon.png, itu akan tersedia di http: // localhost: 8080 / static / favicon.png

Berikut adalah dokumentasi untuk aset statis: https://vuejs-templates.github.io/webpack/static.html

Untuk masalah favicon Anda, Anda dapat meletakkan favicon.icoatau favicon.pngke dalam staticfolder dan merujuk ke <head>index.html Anda sebagai berikut:

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

Jika Anda tidak menetapkan a favicon.icodi Anda index.html, maka browser akan meminta favicon dari root situs web (perilaku default). Jika Anda menetapkan favicon seperti di atas, Anda tidak akan melihat 404 itu lagi. Favicon juga akan mulai muncul di tab browser Anda.

Sebagai catatan tambahan, berikut adalah alasan mengapa saya lebih memilih file PNG daripada ICO:

favicon.png vs favicon.ico - mengapa saya harus menggunakan PNG daripada ICO?

Question 3

Pembaruan kecil untuk Laravel 5.x, tempatkan Anda favicon.icoatau favicon.pngke dalam /publicfolder dan lihat di index.htmlseperti ini:

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

Semoga membantu!

Question 4

Untuk beberapa alasan, solusi di atas tidak berfungsi untuk saya sebelum mengonversi favicon.icofile default menjadi favicon.pngdan mengganti namanya menjadi favicon-xyz.pngmisalnya (Saya telah meletakkan file ini di /publicfolder) dan mengedit index.htmlfile sebagai berikut:

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

Mungkin berguna untuk seseorang.