nuxt.jsでdotenvを使って環境変数を設定する

概要

nuxt.jsでAPIキー等のハードコーディングをやめて環境変数を使いたかった。

設定方法

プロジェクトにdotenvをインストール。

npm install --save dotenv

プロジェクトのルートに.envファイルを作成して環境変数を記述

HOGE=hogehogehoge

nuxt.config.jsでdotenv使えるようにする

require('dotenv').config()

module.exports = {
...
}

nuxt.config.jsに.envで記述した環境変数を定義

module.exports = {
...,
  env: {
    HOGE: process.env.HOGE
  }
},
...

コードの中でこんな感じで使えます

console.log(process.env.HOGE);
// hogehoehoge と表示される