現在、とある開発でVueアプリケーションのリファクタリングを行なっています。

マイグレーション対象にはVueCLIも含まれており、2.x→4.xへのバージョンアップを行いました。

この記事では、マイグレーション作業中に気づいた、VueCLI4.x系の環境変数の扱いについて、書き留めておきたいと思います。

VueCLIとは？

ざっくり以下となります。

Vueアプリケーションを構築するためのライブラリ
- vue create {product-name}でVueベースのプロジェクト作成
- eslint / babel等もいい感じにインストールしてくれる
VueCLI3.x→4.xへのマイグレーションページもあり、ドキュメントが手厚い感じ
- Migrating from v3 | Vue CLI

本編

以下に作成したリポジトリをベースに書いていきます。

VueCLI4.x系の環境変数の扱いは、

のEnvironment Variablesに記載されている通り、.envに環境変数を定義することになります。

環境別に定義することも可能です。

ファイル名	説明
`.env`	・すべての環境において読み込まれる
`.env.local`	・すべての環境において読み込まれる・`vue create`で作成したプロジェクトの場合は`.gitignore`対象となる・`.env`の設定値を上書きする
`.env.[mode]`	・`--mode [mode]`で指定した`[mode]`に合致する場合に読み込まれる・`.env` / `.env.local`の設定値を上書きする
`.env.[mode].[local]`	・`--mode [mode]`で指定した`[mode]`に合致する場合に読み込まれる・`vue create`で作成したプロジェクトの場合は`.gitignore`対象となる・`.env` / `.env.local` / `env.[mode]`の設定値を上書きする

ざっくりまとめると、

の昇順で読み込み、同じ環境変数名の場合は上書きされるという動作となります。

vue-cli4-environment-sandboxをyarn s-devで起動します。

実際にはyarn run vue-cli-service serve --mode developmentを実行、.env.developmentが最後に環境変数として読み込み・上書きしています。

# .env.development
FOO=bar-development
VUE_APP_FOO=bar-development
FOO_VUE_APP=bar-development

画面を確認すると、以下のように表示されます。

f:id:kic-yuuki:20191117165551p:plain

VUE_APP_FOOが読み込まれ、
FOO / FOO_VUE_APPは環境変数として認識されていないことがわかります。

環境変数の件、どうやら3.x系から今の仕様に変わったようですね。

短いですが、以上となります。

間違い等ありましたら、FBいただけると助かります。🙏