More than 3 years have passed since last update.

【Nuxt.js】「dotenv」を使った環境変数の設定方法

Last updated at 2020-11-26Posted at 2020-11-25

#「dotenv」をインストール

プロジェクト直下でnpm install --save @nuxtjs/dotenvを実行

ターミナル

$ npm install --save @nuxtjs/dotenv

#package.jsonで確認

package.json

  "dependencies": {
    "@nuxtjs/dotenv": "^1.4.1",    <-
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  }

#プロジェクト直下に.envファイルを作成

ターミナル

$ touch .env

.envファイルに適当な値を定義します。

.env

TEST = 'テスト'

#nuxt.config.jsの設定

nuxt.config.js


//...省略

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    '@nuxtjs/dotenv'
  ],

//...省略

#console.logで確認
きちんと設定されているか確認します。
pages/index.vueにconsole.logを設置。

pages/index.vue

<script>
export default {
  created() {
    console.log(process.env.TEST)
  }
}
</script>

OKです！

#.gitnoreファイルの確認
最後に.gitnoreファイル内に.envの記述があるか確認します。
nuxt-create-appを使用すればデフォルトで記述されますが、
無い場合は記述しておきます。

これでgitの管理対象外となります。