Nuxt.js:RuntimeConfigで環境変数を参照する(V2)
https://4.bp.blogspot.com/-Eh202n-SoSs/We6SagKmT-I/AAAAAAABHxk/AzQtRIej8IIdZ4VbbL7buQolpzQO-UACgCLcBGAs/s600/bg_tanbo_aki.jpg
⚠この記事は Nuxt.js 2 を対象としています。Nuxt.js 3 に対応した内容は以下を参照してください。
Nuxt.js 2 において、環境変数など動的な値を使用する場合は RuntimeConfig を使用すると良い この機能を使用するには Nuxt 2.12 以上 を使用する必要がある
近い仕組みで、Nuxt Env が存在する (Nuxt - The env property) が、この仕組みでは、アプリケーションを nuxt build したタイミングで設定した値が、ビルド結果にハードコードされて埋め込まれる特性がある。 そのため実行環境の環境変数を反映したい場合は Runtime Config を使用することが必要となる。
Nuxt.js 3 は env が廃止され、RuntimeConfig を経由した設定のみとなっている様子
nuxt.config.jsで設定する
サーバーとクライアントの両方で参照したい場合は「publicRuntimeConfig」を指定する
サーバーのみで参照できればいい場合は「privateRuntimeConfig」で指定する
いずれの場合も環境変数を伝播させたい場合は process.env.XYZ を代入すると良い
https://gyazo.com/0bc1ed1323cff8234765d5dee672d3bf
設定した値を使用する
ページで値を使用する
RuntimeConfig を使用する場合は this.$config もしくは context.$config で参照すると良い
code:vue
<template>
<div>
<h3>DUMMY: ({{$config.dummy || '-'}})</h3>
</div>
</template>
ストアで値を使用する
store、特に nuxtServerInit で値を使用する場合も同様に使用できる
code:js
export const actions = {
nuxtServerInit ({ commit }, { req }) {
console.log('DUMMY:', this.$config.dummy || '-')
}
}
// 結果はコンソール画面に出る