web-dev-qa-db-ja.com

vue.js webpackプロジェクトでfavicon.icoを適切に設定する方法は?

vue webpackを使用してvue-cliプロジェクトを作成しました。

vue init webpack myproject

そして、プロジェクトをdevモードで実行しました:

npm run dev

私はこのエラーを受け取りました:

リソースの読み込みに失敗しました:サーバーは404(Not Found)のステータスで応答しました http:// localhost:8080/favicon.ico

では、webpack内で、favicon.icoを正しくインポートする方法は?

80
Alfred Huang

Webpackテンプレートのプロジェクト構造を確認してください: https://vuejs-templates.github.io/webpack/structure.html

node_modulessrcなどとともに静的フォルダーがあることに注意してください。

favicon.pngのような、staticフォルダーに画像を入れると、 http:// localhost:8080/static/favicon.png で利用可能になります

静的アセットのドキュメントは次のとおりです。 https://vuejs-templates.github.io/webpack/static.html

ファビコンの問題については、favicon.icoまたはfavicon.pngstaticフォルダーに入れて、次のようにindex.htmlの<head>を参照できます。

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

favicon.icoindex.htmlを定義しない場合、ブラウザーはWebサイトのルートからファビコンを要求します(デフォルトの動作)。上記のようにファビコンを指定すると、その404は表示されなくなります。ファビコンもブラウザのタブに表示され始めます。

補足として、ここにICOファイルではなくPNGを好む理由を示します。

favicon.png vs favicon.ico-なぜICOの代わりにPNGを使用する必要があるのですか?

127
Mani