次の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 = 'タイトル' }