vue-cliを使ったプロジェクトで環境変数を使う

開発環境と本番環境で、呼び出すWebAPIのエンドポイントを変更したい場合などは、それらを環境変数に定義することが出来ます。

前提

使用するvue-cliは現時点での最新版2.9.1です。

$ vue -V
2.9.1

説明

使用するファイル

vue-cliでプロジェクト作成時に作られる、次のファイルを使います。

./config/dev.env.js
./config/prod.env.js

devの方は開発環境用の設定ファイルで、npm run devで開発サーバーを立ち上げた際に使用されます。
prodの方は本番環境用の設定ファイルで、npm run buildでプロジェクトをビルドした際に使用されます。

設定例

dev.env.js(例)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ENDPOINT: '"https://api.hogehoge.com/v2"' // 追加例
})

呼び出し

プロジェクトのスクリプト内で呼び出す際は、process.env.<変数名>というように呼び出します。

HelloWorld.vue(例)

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
    created: function () {
      console.log('Environment Variable: ', process.env.API_ENDPOINT) // ココ
    }
}

結果

Environment Variable: https://api.hogehoge.com/v2

注意点

文字列の扱い

環境変数の値に文字列を使用する際は、その値をダブルクォートで囲った後シングルクォートで加工必要ががるようです。
(キモい)

例

NODE_ENV: '"development"'

反映タイミング

特に開発中の話ですが、環境変数を変更した場合は、環境変数を反映させるために開発サーバーを再起動する必要があります。

参考