Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

開発環境と本番環境で、呼び出す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"'

反映タイミング

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

参考

https://vuejs-templates.github.io/webpack/env.html

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