【Nuxt.js】nuxt.config.jsで.envで定義した環境変数を取得して使用する

Nuxt.js
スポンサー

はじめに

この記事ではNuxt.jsのnuxt.config.js内で.envファイルで定義した環境変数を使用する方法を紹介します。

dotenvモジュールをインストールする

.envを読み込むためにnuxt-communityが公開している「dotenv-module」をインストールします。

$ npm install --save @nuxtjs/dotenv
nuxt-community/dotenv-module
Loads your .env file into your application context - nuxt-community/dotenv-module

.envファイルを用意する

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

BASE_URL="http://localhost:8000/"

nuxt.config.jsで.envで定義した環境変数を使用する

dotenvモジュールを使用するために、下記の設定をnuxt.config.jsに追加します。

dotenvのrequireを追加

nuxt.config.jsの先頭に下記のrequireを追加します。

require('dotenv').config()

moduleにdotenvを追加

次はmodulesに「@nuxtjs/dotenv」を設定します。

modules: [
  '@nuxtjs/dotenv',
]

.envに定義した環境変数をnuxt.config.jsで読み込むときは、「process.env.<変数名>」のように記述します。

ここまでに設定したnuxt.config.jsで、上記で用意したBASE_URLを読み込む例を次に示します。
※dotenv-moduleの設定に関係していない、mode等の他の項目については省略しています。

・nuxt.config.js

require('dotenv').config()

export default {

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/dotenv',
  ],

  axios: {
    baseURL: process.env.BASE_URL
  },

}
Nuxt.jsVue.js
スポンサー
フォローする
スポンサー
Public Constructor