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でプロジェクトを作りましょう！