Vue.jsでfaviconとアイコンの画像を設定する方法

ChatGPTに聞いても解決できず自己解決したので、共有しておく

概要

Vue.jsでfaviconとアイコンの画像を設定する方法

条件

Node.jsのバックエンドアプリのディレクトリの直下にVue.js3のプロジェクトを配置している

ディレクトリ構成

結論

• 画像のパスを通す必要があった
• 以下の通りにしたらできた

my-app/vue/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/vue/dist/'
})

my-app/vue/public/index.html（ビルド前）

<link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">

my-app/vue/dist/index.html（ビルド後）

<link rel="icon" type="image/png" sizes="32x32" href="/vue/dist/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/vue/dist/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/vue/dist/apple-touch-icon.png">

my-app/app.js

app.use('/vue/dist/', express.static(__dirname + '/vue/dist/'));
app.use('/', indexRouter)

つまづいた点

• 以下のコードだと、ビルド後のindex.htmlの中の画像のパスがhref="/favicon-16x16.png"になる。app.jsのapp.use('/', indexRouter)が適応されるのでパスが通らなった。

my-app/vue/vue.config.js（修正前）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/'
})

my-app/app.js（修正前）

app.use('/', indexRouter)