【Nuxt,js】envファイルの値を取得する方法！

あきぞらです。

今回は、Nuxt.jsでenvファイルに記載した値を取得する方法を紹介していきます。

基本的には、公式通りです。

とてもわかりやすいです。

NuxtJS

 

3 users

env プロパティ

https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

クライアントサイドとサーバーサイドで環境変数を共有する

envファイルの例

envファイルに以下のような記載があったとします。

BASE_URL=localhost:8000/api

このenvファイルに書いてある、BASE_URLを取得してみたいと思います。

nuxt.config.jsに定義する

envファイルの値を取得するために、nuxt.config.jsに記載をします。

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:8000'
  }
}

ここで定義したbaseUrlは、

他のファイルから以下のようにして呼び出すことができます。

// localhost:8000/apiが出力される
consolr.log(process.env.baseUrl)