env プロパティ
クライアントサイドとサーバーサイドでる環境変数を共有できます。
-
型:
Object
Nuxt ではクライアントサイドとサーバーサイドで共有される環境変数を作成できます。
env プロパティはクライアントサイドで使用できる環境変数を定義します。これらはサーバーサイド環境変数や dotenv モジュール などを使用して割り当てることができます。
env
プロパティをRuntime config プロパティ の publicRuntimeOptions
と privateRuntimeOptions
で代替することが推奨されます。
詳細は、チュートリアルの Moving from @nuxtjs/dotenv to runtime config (/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/)をご覧ください。
より良いトラブルシューティングのために、後述の process.env
と process.env == {}
を必ず読んでください。
export default {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}
これによりサーバーサイドの環境変数 BASE_URL
が利用可能または定義されていれば、BASE_URL
と等しい baseUrl プロパティを作成できます。
もし BASE_URL
が利用不可であったり定義されていなれば、クライアントサイドの baseUrl
は 'http://localhost:3000'
になります。サーバーサイドの環境変数 BASE_URL は nuxt.config.js
の env
プロパティを経由してクライアントサイドにコピーされます。または、他の値が定義されています。
そして baseUrl
変数にアクセスするには 2 つの方法があります:
-
process.env.baseUrl
経由でアクセスする。 -
context.env.baseUrl
経由でアクセスする。詳細は context API を参照してください。
例えば env
プロパティを使って公開トークンを付与できます。
上記の例として、env プロパティを使って axios を設定できます。
import axios from 'axios'
export default axios.create({
baseURL: process.env.baseUrl
})
このように記述するとページ内で import axios from '~/plugins/axios'
という具合に axios をインポートできます。
環境変数の自動注入
ビルドフェーズで NUXT_ENV_
で始まる環境変数を定義(例えば NUXT_ENV_COOL_WORD=freezing nuxt build
または Windows の console に対して SET NUXT_ENV_COOL_WORD=freezing & nuxt build
)した場合、この環境変数はプロセス環境に自動的に注入されます。nuxt.config.js
内に定義した同名変数よりも優先されるので注意してください。
process.env == {}
Nuxt は webpack の definePlugin
を用いて環境変数を定義することに注意してください。つまり、Node.js の実際の process
または process.env
が利用可能でもなければ定義されてもいないことを意味します。nuxt.config.js で定義された env
プロパティは process.env.xxxx
へそれぞれ個別にマップされコンパイル時に変換されます。
つまり、console.log(process.env)
は {}
を出力しますが、console.log(process.env.your_var)
は定義された値を出力します。コードが webpack でコンパイルされると、process.env.your_var
と記述されたすべての箇所が定義した値に置き換えられます。例えば、env.test = 'testing123'
と定義すると、コード中に process.env.test
と記述してある箇所がすべて 'testing123' へ置き換えられます。
前
if (process.env.test == 'testing123')
後
if ('testing123' == 'testing123')
serverMiddleware
serverMiddleware はメインの Nuxt ビルドから分離されているので、nuxt.config.js
に定義された env
変数は使用できません。
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)