Closed9

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

Kazuki TakahashiKazuki Takahashi

SPA時にコンポーネントに直接書いてある場合、dev実行時には設定されているが、ビルド時に置換されないため、ランタイムエラーになる。これはNuxt2と違う動き(のはず)

SSRは未確認

<template>
<div> {{ envValue }} </div>
</template>

<script setup lang="ts">
const envValue = process.env.ENV_VALUE // 実行時にブラウザ上でランタイムエラー
</script>
Kazuki TakahashiKazuki Takahashi

環境ごとの追加の .env を読み込みたいときには --dotenv オプションを使う
例えば .env.local だとこう

$ nuxi dev --dotenv .env.local

このとき、 .env 読み込まれる

Kazuki TakahashiKazuki Takahashi

.env--dotenv 指定のファイルを両方読み込んだときに重複している値は、 --dotenv のほうが勝つ
NUXT_HOGE で Override した場合は、それが勝つ

 .env    <   --dotenv   <    NUXT_XXXX
Kazuki TakahashiKazuki Takahashi

秘匿情報ではなく、フロントエンドコードに置きたい値

  • nuxt.config.tsruntimeConfig.public に対してローカルで利用するデフォルト値を指定しておく
  • .env.development, .env.staging, .env.production などを作成しておき、それぞれの環境時の値を設定して コミットする

秘匿情報か、サーバー内でしか使わない値

  • nuxt.config.tsruntimeConfig に対してローカルで利用するデフォルト値を指定しておく
  • ローカル開発中は、.env 書き込んでおき、ビルド環境・サーバー実行環境の環境変数として、 NUXT_XXXX の形で指定されるようにしておく
Kazuki TakahashiKazuki Takahashi

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にクローズされました