Nuxt 環境変数関連のメモ (v3.2.0時点)

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 などを作成しておき、それぞれの環境時の値を設定して コミットする

SPAかつサーバーAPIを用いないのであれば、基本的にpublicでよさそう

環境変数で NUXT_XXXX と指定して runtimeConfig を上書きすることができるはずだが、 SPA設定で nuxi build すると、 --dotenv と環境変数指定の場合、値が上書きでされない ( .envに書いてあれば上書きされる)

--dotenv 指定でもビルド時にprocess.envには入っているので、以下のようにする。
(無駄を感じる)

 runtimeConfig: {
    public: {
      basePath: process.env.NUXT_PUBLIC_BASE_PATH || undefined,
    },
  },

このスクラップは3ヶ月前にクローズされました