vue-cliで実行時の環境変数を切り替える方法

vue-cliには実行時に環境変数を切り替える方法があるらしい。

https://cli.vuejs.org/guide/mode-and-env.html#modes

これを読めばわかるけど一応メモ。

.envファイルを準備する

.env.development や .env.production というファイルをプロジェクト直下に作成する。

環境変数を用意する

VUE_APP_ の命名規則でつけておく（これでないと読み込めないらしい、重要)

ex) VUE_APP_API_ORIGIN='https://example.com'

.env.development

NODE_ENV='development'
VUE_APP_API_ORIGIN='https://dev-example.com'

.env.production

NODE_ENV='production'
VUE_APP_API_ORIGIN='https://prod-example.com'

package.jsonにビルドコマンドを追加 (optional)

--mode <mode name> を各コマンドに追加

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

実行

上に書いたコマンドを実行して、script内にログ出力してみる。 切り替わってたらOK

console.log(process.env.VUE_APP_API_ORIGIN)