vue-cliで環境変数を使用する

環境変数

開発中と本番で異なる値を使用する場合、環境変数を使用します。
vue-cliを使用している場合、vue-cliがビルド時にファイルから値を読み込んでくれます。

モード

デフォルトでは、3つのモードがあるようです。

  • development
  • test
  • production

development

vue-cli-service serve
の場合に使用される。

test

vue-cli-service test:unit
の場合に使用される。

production

vue-cli-service build
vue-cli-service test:e2e
の場合に使用される。

モードの指定

vue-cli-service のオブションでモードの指定が可能。

1

vue-cli-service build --mode development
このように指定して使用するファイルを切り替えることができる。
この場合だと、developmentモードの環境変数が使用されます。

ファイル名

.env
全てのケースでロードされる。

.env.[mode]
指定されたモードでロードされる。

.env.local
.env.[mode].local
ファイル名の末尾に「.local」とあっても読み込んでくれる。
「.env.local」「.env.*.local」は、.gitignoreに書いておく。

ファイルが複数存在しているときは、下記の順に読み込まれて環境変数単位で値が上書きされているっぽい。

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

全てのパターンのファイルに環境変数が存在していると、 「.[mode].local」の値が使用される。
「.[mode].local」に存在しない環境変数でも「.env」に存在していれば「.env」の値が使用される。

ファイルの書き方

「NODE_ENV」「BASE_URL」以外は、接頭辞に「VUE_APP_」を使用しなくてはいけない。

メモ：vite を使用している場合は、「VITE_」を接頭辞に使用しなくてはいけない。

jsからの使用

下記のように使用します。 

1
2
3
4
5

createApp(App).use(router).use(createAuth0({
    domain: process.env.VUE_APP_AUTH_DOMAIN,
    client_id: process.env.VUE_APP_AUTH_CLIENT_ID,
    redirect_uri: window.location.origin
})).mount('#app')

注意

環境変数はビルド時にアプリケーションに展開されるので、クライアントに隠すことはできない。
クライアントに隠す必要がある値はサーバー側で管理する必要がある。

リンク

VueCli Modes and Environment Variables
Vite 環境変数とモード

Last Mod: Jun 9, 2022