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

94

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?

html ecmascript-6 webpack vue.js favicon Alfred Huang
sumber
1
Sudahkah Anda mencoba memasukkannya ke root situs? :) Atau di folder build publik?
Benjamin

Jawaban:

154

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?

Mani
sumber
1
bagaimana jika saya ingin menyimpan favicon saya di src / assets? apakah yang terbaik adalah membiarkannya di folder statis bersama dengan .gitkeep?
Akin Hwan
4
@AkinHwan Saya belum mencobanya, tetapi jika Anda menyimpan gambar apa pun di src / assets, itu akan diperlakukan sebagai ketergantungan modul dan akan masuk ke file build terakhir sebagai gambar inline (format base64). Ini akan meningkatkan ukuran build secara tidak perlu. Tidak perlu khawatir, itu tidak akan mempengaruhi kinerja dengan cara apa pun. Ini adalah preferensi saya untuk menyimpan gambar sebagai "aset statis nyata" seperti yang dijelaskan di dokumen . Preferensi Anda mungkin berbeda. Anda perlu mencoba kedua metode dan memilih salah satu yang cocok untuk Anda.
Mani
8
Jawaban ini sepertinya sudah ketinggalan zaman. Dalam template webpack vue saat ini, ada direktori publik , bukan direktori statis .
JakeParis
@JakeParis juga, menggunakan "shortcut" di rel link hanya digunakan untuk internet explorer.
Caine Nielsen
4

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!

delapan bola
sumber
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.

tjurkan
sumber