28
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

vue-cliを使ったプロジェクトで環境変数を使う

開発環境と本番環境で、呼び出すWebAPIのエンドポイントを変更したい場合などは、それらを環境変数に定義することが出来ます。

前提

使用するvue-cliは現時点での最新版2.9.1です。

$ vue -V
2.9.1

説明

使用するファイル

vue-cliでプロジェクト作成時に作られる、次のファイルを使います。

./config/dev.env.js
./config/prod.env.js

devの方は開発環境用の設定ファイルで、npm run devで開発サーバーを立ち上げた際に使用されます。
prodの方は本番環境用の設定ファイルで、npm run buildでプロジェクトをビルドした際に使用されます。

設定例

dev.env.js(例)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ENDPOINT: '"https://api.hogehoge.com/v2"' // 追加例
})

呼び出し

プロジェクトのスクリプト内で呼び出す際は、process.env.<変数名>というように呼び出します。

HelloWorld.vue(例)
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
    created: function () {
      console.log('Environment Variable: ', process.env.API_ENDPOINT) // ココ
    }
}
結果
Environment Variable: https://api.hogehoge.com/v2

注意点

文字列の扱い

環境変数の値に文字列を使用する際は、その値をダブルクォートで囲った後シングルクォートで加工必要ががるようです。
(キモい)

NODE_ENV: '"development"'

反映タイミング

特に開発中の話ですが、環境変数を変更した場合は、環境変数を反映させるために開発サーバーを再起動する必要があります。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
28
Help us understand the problem. What are the problem?