vue-cliでプロジェクトを作成した際に、エンドポイントになっているファイル名を変更の仕方がわからなかった。その時の調査した内容と設定方法をメモ

状況

vue-cliでプロジェクトを作成した時に、TypeScriptを選択し忘れてしまい後から追加した。(プロジェクトを作る直してもよかったのですが、何となくそのまま続行しました。。)

エンドポイントになっているファイルを確認

この時のディレクトリ構成

test-project
├ node_modules
├ public
├ src
│   ├ assets
│   ├ components
│   ├ App.vue
│   └ main.js
├ package.json
・・・・

src/main.jsがエンドポイントになっている。これをtsファイルに変更したい。(src/main.js → src/main.ts)
エンドポイントを指定している設定ファイルがあると思ったのですが、見つからず。。。
実行時(yarn run serve)の内容を確認してみることにしました。

yarn run serveで実行されている内容は？

package.jsonの中を確認

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

vue-cli-service serveの中身を確認。

こちら参照させていただきました →「vue-cliのリポジトリ」
ユーザーがvue.config.jsを作成している場合、その内容で実行オプションが上書きされるようです。
(なにも設定してないとsrc/main.js。TypeScriptのオプションをつけてプロジェクトを作成していた場合はsrc/main.tsがデフォルト値になっていました。)

vue.config.jsを作成

プロジェクトルートにvue.config.jsファイルを作成。
今回はエントリーポイントのファイルを変更したかったので以下の設定を書きました。(設定値については公式ドキュメントを参考にしました。)

module.exports = {
    pages: {
      index: {
        // エントリーポイントのファイル名
        entry: 'src/main.ts'
      }
    }
  }

無事エントリーポイントがsrc/main.js → src/main.tsに変更できました！

vue-cliで簡単にvueのプロジェクトを作成できるようになった反面、内部でどんな処理が走っているか全然わかってなかったので今回少しだけ理解を深められた気がします。
やってくれている系の処理を少しずつ理解していきたい。。