はじめに
この記事ではNuxt.jsのnuxt.config.js内で.envファイルで定義した環境変数を使用する方法を紹介します。
dotenvモジュールをインストールする
.envを読み込むためにnuxt-communityが公開している「dotenv-module」をインストールします。
$ npm install --save @nuxtjs/dotenvGitHub - nuxt-community/dotenv-module: Loads your .env file into your application context
Loads your .env file into your application context - GitHub - nuxt-community/dotenv-module: Loads your .env file into your application context
github.com
.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
},
}
