BinaryDevelop
  1. ホーム
  2. html

[解決済み] vue.jsのwebpackプロジェクトでfavicon.icoを適切に設定する方法は？

2022-09-24 03:58:27

質問

私は vue webpack プロジェクトで vue-cli . 

vue init webpack myproject

でプロジェクトを実行し dev モードで実行します。 

npm run dev

こんなエラーが出ました。

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

では、webpack内部では、どのようにインポートすれば favicon.ico を正しくインポートできますか？

どのように解決するのですか？

webpack テンプレートのプロジェクト構造を確認する。 https://vuejs-templates.github.io/webpack/structure.html

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

に何か画像を入れると static フォルダの中に、例えば favicon.png で利用できるようになります。 http://localhost:8080/static/favicon.png

以下は静的アセットに関するドキュメントです。 https://vuejs-templates.github.io/webpack/static.html

ファビコンの問題については favicon.ico または favicon.png を static フォルダに移動し <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 を指定すると、ブラウザはウェブサイトのルートからファビコンを要求します(デフォルトの動作)。上記のようにファビコンを指定すると、404が表示されなくなります。ファビコンは、ブラウザのタブにも表示されるようになります。

余談ですが、私が ICO ファイルではなく PNG を好む理由はここにあります。

favicon.png vs favicon.ico - ICOの代わりにPNGを使用する理由とは？

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します