[JavaScript]Vue.jsでサイトのタイトルを変える方法


次の3パターンのいずれか

  • public/index.htmlを書き換える。
  • vue.config.jsを書き換える。
  • DOMを操作する。

デフォルトの設定はindex.htmlかvue.config.jsを書き換えておく。
index.htmlを書き換えても良いけど、vue.config.jsで設定する方がHTMLを流用できる。

ページごとの設定はDOMを操作する。
Single Page Application (SPA)が前提。

すべてDOMの操作で実現することもできるけど、表示開始時の書き換えが目立つため個人的に除外。非SPAならバッグエンドで動的にHTMLを生成するという手段があるけど、こちらはVue.js呼び出し前の処理になるのでインフラ次第。

public/index.html

<%= htmlWebpackPlugin.options.title %>を消し、タイトルを書く。

vue.config.js

  pages: {
    index: {
      entry: 'src/main.ts',
      title: 'タイトル'
    }
  },

npm run build後、dist/index.htmlに出力される。

DOM

createdやmountedなどのタイミングでdocument.titleに設定する。

  created: () => {
    document.title = 'タイトル'
  }