Vue.js + webpack で環境ごとに設定ファイルを分ける

Vue.js と webpack の構成で、development や production などの環境ごとに設定ファイルを分ける方法のメモです。

設定ファイルの設置

src/config/ に development.js や production.js の設定ファイルを設置します。

export default {
  api_key: 'api_key_string'
}

config ディレクトリのエイリアス指定

環境ごとに読み込めるように webpack のエイリアスを指定します。

{
  resolve: {
    alias: {
      config: resolve(`src/config/${process.env.NODE_ENV}.js`)
    }
  }
}

設定ファイルの読み込み

import config from 'config'

const configMixin = Vue.mixin({
  created: function () {
    this.$config = config
  }
})

store.dispatch('init').then(() => {
  new Vue({
    el: '#app',
    configMixin,
    components: { App },
    template: '<App/>'
  })
})

これで this.$config.api_key で呼び出せます。

環境の指定

package.json で NODE_ENV を明示的に環境を指定します。

{
  "scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "NODE_ENV=production node build/build.js"
  }
}