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

4041 ワード
Vue.js JavaScript nuxt.js 環境変数 dotenv JavaScript テキストリンク

「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の管理対象外となります。