• HOME
  • Nuxt.js v2.13以降 環境変数の設定について
TomoyaOkada

Nuxt.js v2.13以降 環境変数の設定について

記事をシェアする

当サイトを作るときは、@nuxt/dotenvをインストールして環境変数を管理する方法にしていました。
改めて調べてみるとv2.13 以降からはNuxt標準の機能で環境変数の設定できる事がわかったのでそれをまとめていきます。

読者の想定と前提

  • プロジェクトを作成している
  • nuxtについての知識が少しでもある


.envの作成

こちらは今まで通り.envファイルを作成します。

BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
API_KEY=xxxx-xxxx-xxxx


nuxt.config.jsに記述

export default {  
 // 公開されていいもの
  publicRuntimeConfig: {
    apiURL: process.env.API_URL || 'http://localhost:8888',
  },
// 公開したくないもの
  privateRuntimeConfig: {
    apiKEY: process.env.API_KEY,
  },
}


基本的には以上になります。
また、定義した変数は以下で呼び出す事ができます。

  • pages
  • store
  • components
  • plugins



記事をシェアする