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を正しくインポートする方法は？

htmlecmascript-6webpackvue.jsfavicon
80
Alfred Huang

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

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

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

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

ファビコンの問題については、favicon.icoまたはfavicon.pngをstaticフォルダーに入れて、次のように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.icoでindex.htmlを定義しない場合、ブラウザーはWebサイトのルートからファビコンを要求します（デフォルトの動作）。上記のようにファビコンを指定すると、その404は表示されなくなります。ファビコンもブラウザのタブに表示され始めます。

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

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

127
Mani