vueでindex.htmlやエントリーポイントやビルドの出力先を変える方法

背景

vueとはjavascriptでフロントエンドを作れるフレームワークです。
vue-cli-serviceを利用して開発モードの起動やビルドを行う場合、標準の設定ではpublic/index.htmlを使う設定になっています。

プロジェクトの都合でpublic/index.htmlを切り替えたい場面があったので、備忘録を兼ねて方法を共有します。

使ったもの

vue-cli-serviceを利用するvueのプロジェクト

やりたいこと

adminとuserで利用するindex.html、エントリーポイント、ビルド後のフォルダを分ける。

利用するconfigと出力先のフォルダをコマンドごとに変える

VUE_CLI_SERVICE_CONFIG_PATHでconfigファイルの絶対パスを環境変数として渡せば、vue-cli-serviceで読み込む設定ファイルを切り替えられます。

Ubuntuで実行する場合はpackage.jsonのコマンドを下記のように書き換えれば、configファイルを変更できました。
admin向けにはvue.config.admin.jsを、user向けにはvue.config.user.jsを定義して、それぞれ利用しました。

ビルド後のフォルダは--distオプションでパスを指定することで変えられます。

package.json

{
  "scripts": {
    "admin:build": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.admin.js vue-cli-service build --dest dist/admin",
    "admin:build-watch": "yarn admin:build --watch src/admin/main.ts",
    "user:build": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.user.js vue-cli-service build --dest dist/user",
    "user:build-watch": "yarn user:build --watch src/partner/main.ts"
  }
}

これにより、「yarn admin:build」と「yarn user:build」で異なるconfigを利用し、別のフォルダにビルド後のファイルを出力する状態になりました。

参考: Specify a vue-cli vue.config.js location - Stack Overflow

configでindex.htmlとエントリーポイントを指定する

configのpagesオプションで読み込むindex.htmlやエントリーポイントを指定できます。
vue.config.adminとvue.config.userをこのように設定することで、利用するindex.htmlとエントリーポイントのファイルを変えられました。

vue.config.admin.js

module.exports = {
  pages: {
    index: {
      entry: 'src/admin/main.ts',
      template: 'public/admin-index.html',
    },
  },
}

vue.config.user.js

module.exports = {
  pages: {
    index: {
      entry: 'src/user/main.ts',
      template: 'public/user-index.html',
    },
  },
}

参考: Vue CLI Configuration Reference #pages

まとめ

package.jsonでvue.config.jsと出力先のフォルダの切り替えを行い、configでのindex.htmlとエントリーポイントを設定することで、adminとuserで異なるファイルを元に異なる出力先にビルドする設定ができました。

ここまで込み入るならプロジェクトを分けたら良いとは思うのですが、ビルド環境の都合などでそうできない状況に遭遇したら、今回紹介した設定方法が役に立つと思います。