Vue.js：ファビコンの変更に手間取った件
akinoriVue.js：ファビコンの変更に手間取った件
もう何なんでしょう。こんなに苦戦するとは全く予想してませんでした。
「Vueのアイコンがしつこい！」というお話です。
普通に考えれば <link rel="icon" href="<%= BASE_URL %>favicon.ico">の変更
そう、これだけでいいはずと私も思っていました。なので下のような構築を考えていました。
- DjangoのstaticをVueから見えるようにバックヤードを調整
- Vueのpublic/index.htmlに記載されているHead内Linkにstatic内のicon保存場所を登録
- 再読み込み、またはリビルドで変更適応
で、実際にやってみると読み込まない...。
「場所の指定が悪い？」などいろいろ考えて変更してみたのですが上手くいかず...。
ソースを確認したら非表示になっている
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
注目は【7行目】です。
なんで [ <!-- --> ] で囲まれてるのさ。
色々調べていたら rel にicon 以外の値を含ませると非表示にならないらしい
例えばこんな感じです。
<link rel="icon shortcut" href="/favicon.ico">
確かに非表示にはなりませんでしたが、ブラウザのファビコンは変わりません。
いろんな記事を参考にさせて頂いた中で理解できたこと
Vue.jsのファビコン設定はVue自身が最適なものを勝手に選んでくれるようです。
その際の選択肢として利用されるのが【project/public/img/icon】内のpngやsvgファイル。
Laravelで組んでいた時は確かにファビコンのリンク沢山書いた記憶があります。
Vueのベースが1行だったので「これだけを見ている」と勘違いしたんですね。
実際はVueさんがよしなにやってくれているだけだったようです。
ファビコンを変える最も簡単な方法
はい、御想像の通りです。
public/favicon.icon と iconディレクトリの中身を入れ替える
これが最も簡単な方法です。
構築されている理屈の中のデータだけ挿げ替える。
まぁ何とも「...」な方法ではありますが、最終的にはクライアントが望むものが出来れば良いのですからね。
この方法も「あり」だと思います。
『 vue.configs.js』を弄る
module.exports = {
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
}
}
};
こんな記載をすることでファビコンを任意のデータにする事が出来るようです。
ちなみに、この方法について実験してみましたが私の環境では何故か上手くできませんでした。
多分、どんな時にという条件分岐を一緒に示さないといけないのではないかと思います。
Vueが自動で行っている行動を代替する形でないと動作しないのかなと。
ちなみに、自動で作成されているファビコン系のScriptは下の通りです。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"> <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"> <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"> <meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
まとめ
グーグル先生に聞くと3パターンくらいの方法が出てくるんですが、試しても上手くいかないのは『環境』のせいでしょうか。
まぁiconsディレクトリの総取換え作戦は「失敗」のない最も簡単な方法です。
特別な理由がない限り、この線を捨てる必要もないかなと思います。
なんかスッキリしない解決方法ではありますけど。
＼ 最新情報をチェック ／
