Closed9
Nuxt 環境変数関連のメモ (v3.2.0時点)
Nuxt3ではルートに.envを置いておくと自動で読み込まれる
SPA時にコンポーネントに直接書いてある場合、dev実行時には設定されているが、ビルド時に置換されないため、ランタイムエラーになる。これはNuxt2と違う動き(のはず)
SSRは未確認
<template>
<div> {{ envValue }} </div>
</template>
<script setup lang="ts">
const envValue = process.env.ENV_VALUE // 実行時にブラウザ上でランタイムエラー
</script>
環境ごとの追加の .env
を読み込みたいときには --dotenv
オプションを使う
例えば .env.local
だとこう
$ nuxi dev --dotenv .env.local
このとき、 .env
も 読み込まれる
実際に読んでるところ
指定ファイルか .env
が読み込まれるのはわかるが、両方を読み込んでいるのがどこなのかよくわからない
今日(2023/2/14) なんか githubのリポジトリ検索でコードが全くひっかからずに探しにくい
.env
と --dotenv
指定のファイルを両方読み込んだときに重複している値は、 --dotenv
のほうが勝つ
NUXT_HOGE
で Override した場合は、それが勝つ
.env < --dotenv < NUXT_XXXX
秘匿情報ではなく、フロントエンドコードに置きたい値
-
nuxt.config.ts
のruntimeConfig.public
に対してローカルで利用するデフォルト値を指定しておく -
.env.development
,.env.staging
,.env.production
などを作成しておき、それぞれの環境時の値を設定して コミットする
秘匿情報か、サーバー内でしか使わない値
-
nuxt.config.ts
のruntimeConfig
に対してローカルで利用するデフォルト値を指定しておく - ローカル開発中は、
.env
書き込んでおき、ビルド環境・サーバー実行環境の環境変数として、NUXT_XXXX
の形で指定されるようにしておく
SPAかつサーバーAPIを用いないのであれば、基本的にpublicでよさそう
SPA build時に NUXT_XXXX 指定で runtimeConfig が上書きされない場合がある
環境変数で NUXT_XXXX
と指定して runtimeConfig を上書きすることができるはずだが、 SPA設定で nuxi build
すると、 --dotenv
と 環境変数指定の場合、値が上書きでされない ( .envに書いてあれば上書きされる)
対応
--dotenv
指定でもビルド時にprocess.envには入っているので、以下のようにする。
(無駄を感じる)
runtimeConfig: {
public: {
basePath: process.env.NUXT_PUBLIC_BASE_PATH || undefined,
},
},
このスクラップは2024/01/18にクローズされました