【初心者向け】Vue CLI 3 で htmlWebpackPlugin.options.title を使って簡単にタイトルを変更する方法

2024-06-08

Vue CLI 3 で作成したプロジェクトでは、htmlWebpackPlugin.options.title オプションを使用して Web ページのタイトルを設定できます。このオプションは、vue.config.js ファイルまたは package.json ファイルで設定できます。

設定方法

vue.config.js ファイルを使用する

ルートディレクトリに vue.config.js ファイルを作成します。
以下のコードを追加します。

module.exports = {
  pages: {
    index: {
      title: 'My App Title'
    }
  }
}

このコードは、index.html ファイルのタイトルを My App Title に設定します。

package.json ファイルを使用する

以下のプロパティを追加または編集します。

"name": "my-app",
"title": "My App Title"

このコードは、package.json ファイルの name プロパティと title プロパティを使用して、index.html ファイルのタイトルを設定します。

public/index.html ファイルを直接編集する

<title><%= htmlWebpackPlugin.options.title %></title>

この行を以下のように編集します。

<title>My App Title</title>

この方法は、htmlWebpackPlugin.options.title オプションを使用せずに、index.html ファイルのタイトルを直接設定する方法です。

注意事項

vue.config.js ファイルと package.json ファイルの両方で title プロパティを設定すると、vue.config.js ファイルの設定が優先されます。
開発サーバーを再起動しないと、タイトルの変更が反映されない場合があります。

この回答は、JavaScript、HTML、および Node.js の知識を前提としています。
上記の方法は、Vue CLI 3 の最新バージョンでのみ動作することが保証されています。
何か問題が発生した場合は、Vue CLI の公式ドキュメントまたはフォーラムを参照してください。

module.exports = {
  pages: {
    index: {
      title: 'My App Title'
    }
  }
}

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My awesome app",
  "private": true,
  "scripts": {
    "dev": "vue-devtools serve",
    "build": "vue-devtools build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@vue/cli": "^4.5.0",
    "@vue/compiler-sfc": "^2.6.12",
    "vue-devtools": "^6.1.1",
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.11.0"
  },
  "title": "My App Title"
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App Title</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/js/app.js"></script>
</body>
</html>

htmlWebpackPlugin.options.title を設定するその他の方法

webpack 設定ファイルを使用して、htmlWebpackPlugin オプションを直接設定することができます。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App Title'
    })
  ]
};

ejs テンプレートエンジンを使用して、index.html ファイルを動的に生成することができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/js/app.js"></script>
</body>
</html>

const HtmlPlugin = require('html-webpack-plugin');
const ejs = require('ejs');

module.exports = {
  // ...
  plugins: [
    new HtmlPlugin({
      template: 'public/index.ejs',
      inject: true,
      filename: 'index.html',
      templateParameters: {
        title: 'My App Title'
      }
    })
  ]
};

doctype html
html lang="en"
head
  meta charset="UTF-8"
  meta name="viewport" content="width=device-width, initial-scale=1.0"
  title= title
body
  div(id="app")
  script(src="./dist/js/app.js")

const HtmlPlugin = require('html-webpack-plugin');
const pug = require('pug');

module.exports = {
  // ...
  plugins: [
    new HtmlPlugin({
      template: 'public/index.pug',
      inject: true,
      filename: 'index.html',
      templateParameters: {
        title: 'My App Title'
      }
    })
  ]
};