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のデフォルト設定を上書きする。
(・・・・省略・・・・)
/* 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を記述する
module.exports = {
pages: {
index: {
// エントリーポイント
entry: 'src/index.js',
},
}
}
さらに、vueのデフォルトでファイルを保存したときにlintが動くので、それを無効化したい場合もこのように書ける。
参考URL:https://cli.vuejs.org/config/#lintonsave
module.exports = {
pages: {
index: {
// エントリーポイント
entry: 'src/index.js',
},
},
lintOnSave:false //←追記
}
##まとめ
-
vue inspect > output.js
でvue-cliのデフォルト設定を確認できる -
vue.config.js
ファイルでデフォルト設定をカスタマイズできる。詳細はhttps://cli.vuejs.org/config/#vue-config-js