[解決済み] vue cli 3 で作成したプロジェクトで htmlWebpackPlugin.options.title を設定するには、どこで、どのように見つければよいですか？

2022-03-10 13:37:02

質問

vue cli 3 で作成したウェブページにタイトルを設定したいと思い、以下のことを調べました。 public/index.html . そこで、私は <title><%= htmlWebpackPlugin.options.title %></title> .

を設定・変更するにはどうすればよいのでしょうか？ htmlWebpackPlugin.options.title vue cli 3 プロジェクトで使用できますか？

解決方法を教えてください。

この問題の人気ぶりを見て、私は、より信憑性が高く、完全なものにするために、参考文献を含む詳細な回答を加えることにしました。また記事でこのトピックを取り上げました。これとこれコースがあります。

この質問で求めているのは設定ですが htmlWebpackPlugin.options.title 最終的な効果は、ウェブページのタイトルを変更することです。

1. 最も便利で些細な解決策

一番簡単な方法は public/index.html とタイトルをハードコードします。

<!DOCTYPE html>
<html lang="">

<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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

これは、デフォルトの public/index.html は、vue cli が生成するものです。そしてこの中で、あなたはただ

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

になります。

<title>Title of your choice</title>

2. を変更します。 `name` のフィールドを `package.json`

もう一つの簡単な解決策は "name": "your-project-name" . しかし name で使用することができます。 package.json . 詳しくはこちらこちら . 基本的には package.json は名前を含む必要があり、それは小文字で1語でなければならず、ハイフンやアンダースコアを含むことができます。

3. 使用方法 `pages` のフィールドを `vue.config.js`

vue.config.js は、Vue CLIに追加の設定を提供するために追加できるオプションのファイルで、このファイルが存在する場合、Vue CLIによって自動的に読み込まれます。を作成する必要があります。 vue.config.js を含むフォルダをルート・フォルダ内に作成します。 package.json ファイルを作成します。

によると Vueのドキュメントページフィールドを使用して、マルチページアプリのエントリポイントを定義することができます。しかし、これは単一ページアプリのタイトルを定義するためにも使うことができます。作成 vue.config.js をルートディレクトリに追加し pages フィールドを以下のようにエクスポートします。

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}

なお、すでに開発用サーバーを起動している場合は、開発用サーバーを停止して再起動したときのみ、この変更が反映されます。言い換えれば、これらの変更はホットリロードされません。

4. Webpackのチェーン化

あなたはチェーンウェブパックで vue.config.js 以下のように

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

なお、解決策3と同様に、すでに開発サーバーを起動している場合は、開発サーバーを停止して再起動したときにのみ、この変更が反映されることに注意してください。言い換えれば、この変更はホットリロードされません。

5. ライフサイクルフックのタイトルをJavaScriptで変更する

次の解決策は、JavaScriptを使用してタイトルを変更することです。これは mounted ルートコンポーネントのライフサイクルフック、またはルートごとに異なるタイトルが必要な場合は、各ルートで読み込まれるコンポーネントに対して同じことを行うことができます。

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>

6. Vueメタの使用

最後にバリューメタを使用すると、タイトルを含むVueアプリのすべてのメタデータを管理できます。まず、プロジェクトにVue Metaを追加し、次に metaInfo フィールドを使用して、ページやルートのメタデータを設定することができます。

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}

まとめ

最初の4つの解決策は、タイトルを変更する静的な方法です。言い換えれば、これらの方法を使って実行時にタイトルを変更することはできません。また、これらはすべてホットリロードされません。最後の2つの方法は、JavaScriptを使用しており、実行時にタイトルを操作することができます。