vue-cli 3.0 で作成したプロジェクトの環境変数(.env)の設定

vue-cli 3.0 がRCになりました。
2.x系から大きく変わったため、ドキュメントを読みながら
production環境とdevelopment環境でのパラメータを分けたい際に利用する
環境変数の設定方法を記載します。

設定ファイルについて

設定ファイルはプロジェクトのルートディレクトリに以下のファイルを置きます。
src配下ではないので注意してください。

# production環境用ファイル
.env
# development環境用ファイル
.env.development
# test環境用ファイル
.env.test

変数の定義方法

VUE_APP_○○=xxx の形式で記載します。
VUE_APP_を先頭に付与しないと、その変数は読み込まれません。
私はここでハマりました。もう一度言います。
VUE_APP_をプリフィックスとしてつけないと変数は読み込まれません。

# これは読み込まれる
VUE_APP_API_URL_BASE=https://xxx.yyy.example.com/api/

# これは読み込まれない
API_VERSION=v1

アプリケーションから変数へのアクセス

process.env.○○ でアクセスします。

console.log(process.env.VUE_APP_API_URL_BASE);
// https://xxx.yyy.example.com/api/ が出力される

console.log(process.env.API_VERSION);
// undefinedが出力される

参考資料

最後に

そろそろvue-cli3.0向けの記事が増えてきてもいいと思うんです。
まだ仕事では使いづらい段階かもしれませんが、個人の勉強として使う分には
ぜひvue-cli3.0でプロジェクトを作りましょう！