Posted at

Vue CLI 3で設定ファイル(vue.config.js)を切り替えてビルドしたい


実施環境


  • OS: macOS Mojave (10.14)

  • Vue CLI: 3.0.5


今回のゴール

npm scriptsで設定ファイルを指定してvue-cli-serviceを実行できるようにする


1. 設定ファイルを複数用意する

今回はproject/config/配下に作りました。

※違いが分かれば良いのでHtmlWebpackPluginで使用するtemplateを変えています。


vue.config.js

module.exports = {

chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = 'public/index.html'
return args
})
}
}


vue.config.sp.js

module.exports = {

chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = 'public/index_sp.html'
return args
})
}
}


2. npm scriptsを追加、変更する


step1. 調査する

@vue/cli-service/lib/Service.jsを見てみると、L.261あたりに下記の記述があります。


Service.js

const configPath = (

process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
path.resolve(this.context, 'vue.config.js')
)

環境変数にVUE_CLI_SERVICE_CONFIG_PATHを指定してあげれば良さそうです。


step2. npm scriptsを書く

変更前


package.json

"scripts": {

"serve": "vue-cli-service serve",
},

変更後


package.json

"scripts": {

"serve": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service serve",
"serve:sp": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.sp.js vue-cli-service serve",
},


3. 動作確認

yarn serve

yarn serve:sp