Vue CLIを用いた環境変数の設定方法

基本的にはVue CLI の公式ページや他の方の記事を確認すればわかりますが、実際に適用するやり方が明記されていないように思えたので記載しました。

環境

・ Vue CLI: 3.6.3

作成前提

今回はローカル環境、開発環境、本番環境の 3 つを用意します。

環境変数設定方法

.env ファイルの作成

プロジェクトファイルのルートディレクトリに
.env.local
.env.development
.env.prod
を作成します。

それぞれのファイルの書き方の例は下記の通りです。
それぞれの環境で使用したい、API の Base URL 等を記載します。
Vue CLI では.localがつくものは.gitignore で git には push しないように初期設定されています。
.env ファイルの変数にはVUE_APP_の接頭辞が必要になります。

.env.local

NODE_ENV='local'
VUE_APP_API_BASE_URL='https://localhost:8080/api/v1/xxx'

.env.development

NODE_ENV='development'
VUE_APP_API_BASE_URL='https://development/api/v1/xxx'

.env.production

NODE_ENV='production'
VUE_APP_API_BASE_URL='https://production/api/v1/xxx'

package.json の設定

package.json のscriptsに下記のように追記します。
package.json のscriptsではエイリアスを作成することができます。

package.json

"scripts": {
    "local-serve": "vue-cli-service serve --mode local",
    "dev-serve": "vue-cli-service serve --mode development",
    "prod-serve": "vue-cli-service serve --mode production",
    "dev-build": "vue-cli-service build --mode development",
    "prod-build": "vue-cli-service build --mode production",
  }

使用方法

package.json を上記のように設定することで、
yarn local-serve
を実行すると.env.localの環境変数が適応されるようになります。
同様にyarn dev-build
を実行すると.env.developmentに定義された環境変数を用いた build モジュールが作成されるので、各々の開発環境にデプロイしてください。

参考

.env ファイルについて: vue-cli で環境変数を使う←リンクがきれています。