Vue CLI v4 を使ってマルチページアプリケーションを作るための設定方法

やりたきこと

SPA (Single Page Application)ではなく、画面ごとにエントリーポイントを指定したい(画面ごとに静的 HTML を出力したい)場合。

インストールとプロジェクトの作成

インストール

npm install @vue/cli

新規プロジェクトの作成

vue create YOUR_PROJECT_NAME

vue.config.js にてエントリーポイントを追加する

エントリーポイントは vue.config.js にて指定することができます。 まだ存在していない場合はプロジェクトルートに作成します。

module.exports = {
  pages: {},
}

pages にエントリーポイントの情報を追加していきます。

一意のエントリーポイント名を指定し、必要なオプションを追加します。

キーに指定した名前が dist した際に出力される JavaScript や CSS のファイル名になります (ex. index.[hash].js, index.[hash].css) 下では index という名前のページを作成しています。

module.exports = {

  pages: {
    index: {
      entry: 'src/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page'
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
}

各オプションは下のようになっています。

オプション	説明
entry	エントリーポイントとなるファイル
template	テンプレートとなる HTML を指定する。この HTML をもとに、ビルド後の JavaScript や CSS への参照が出力される。指定しなかった場合のデフォルト値は public/index.html.
filename	画面HTML のファイルパスを指定する。/ を含めれば任意のディレクトリ階層へ出力できる。 (ex. about/index.html)
title	template で指定したファイル内で <%= htmlWebpackPlugin.options.title %> と書くことでこの値が展開される。各オプションの値は htmlWebpackPlugin.options のプロパティから参照できるので title 以外にも任意のプロパティを追加することでテンプレートから使うことができる。
chunks	chunks を指定できる。指定がなければデフォルトで vendors chunks, common chunks をページに含むようになっている。

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js