vue.config.js設定ファイルについて

vue-cliのvue create hello-project などで作成したvueプロジェクトの設定内容（もともとwebpackで書いていた内容）がvueによって隠されるので、設定を確認したい場合はvue inspect > output.jsで適当なファイルに出力して確認すれば良く、カスタマイズしたい場合はvue.config.jsを作って中身を編集していくことになる。

vue.config.jsの設定の詳細はhttps://cli.vuejs.org/config/#vue-config-js

デフォルト設定の確認

vue-cliのデフォルトの設定は、vue inspect > output.jsで確認できる。おおよそ1300行ぐらいのファイルが出力される。
デフォルト設定項目がいろいろ出力されますが、わかりやすい項目として最後の方にappのエントリーポイントにsrc/main.jsが設定されていることが確認できる。これによって、npm run serverでappを実行した時には、Vueが自動でsrcの下のmain.jsを探していくことになる。もしmain.jsをindex.jsに名前を変えてしまっていた場合はエラーになってしまう。
このoutput.jsはただの確認だけなので、output.jsの項目を変更しても設定を変更することはできない。
仮に、main.jsが嫌で、index.jsをエントリーポイントにしたい場合はvue.config.jsを作成して、vueのデフォルト設定を上書きする。

output.js

(・・・・省略・・・・)
    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        title: 'vue_calender_app',
        templateParameters: function () { /* omitted long function */ },
        template: '/Users/abc/workspace/vue_calender_app/node_modules/@vue/cli-service/lib/config/index-default.html'
      }
    ),
    /* config.plugin('preload') */
    new PreloadPlugin(
      {
        rel: 'preload',
        include: 'initial',
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    /* config.plugin('prefetch') */
    new PreloadPlugin(
      {
        rel: 'prefetch',
        include: 'asyncChunks'
      }
    )
  ],
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

設定の変更

デフォルトの設定を変更するには、package.jsonと同じレベルでvue.config.jsという名前のファイルを作成し、変更内容をその中に書いていく。変更できる項目の詳細はhttps://cli.vuejs.org/config/#vue-config-js
例えば、エントリーポイントをmain.jsからindex.jsに変更したい場合は、以下のようにvue.config.jsを記述する

vue.config.js

module.exports = {
  pages: {
    index: {
      // エントリーポイント
      entry: 'src/index.js',
    },
  }
}

さらに、vueのデフォルトでファイルを保存したときにlintが動くので、それを無効化したい場合もこのように書ける。
参考URL:https://cli.vuejs.org/config/#lintonsave

vue.config.js

module.exports = {
  pages: {
    index: {
      // エントリーポイント
      entry: 'src/index.js',
    },
  },
  lintOnSave:false //←追記
}

まとめ

1. vue inspect > output.jsでvue-cliのデフォルト設定を確認できる
2. vue.config.jsファイルでデフォルト設定をカスタマイズできる。詳細はhttps://cli.vuejs.org/config/#vue-config-js