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

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

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

• VueCLIとは？
• 本編
  • 環境変数は .env に定義する
  • 接頭語「VUE_APP_」を付与する
• おわり

VueCLIとは？

cli.vuejs.org

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

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

本編

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

• GitHub - zakizaki-ri9/vue-cli4-environment-sandbox: VueCLI4.x系の環境変数を確認するためのリポジトリ

環境変数は .env に定義する

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

• Modes and Environment Variables | Vue CLI

の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]の設定値を上書きする

ざっくりまとめると、

1. .env
2. .env.local
3. .env.[mode]
4. .env.[mode].local

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

接頭語「VUE_APP_」を付与する

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

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

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

おわり

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

• vue-cli3系を使ってvue.jsアプリケーションで環境変数を扱う - もふもふ技術部

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

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