Viteで.envの内容が取得できない時に確認したこと

#JavaScript

.env の内容がアプリ内から import.meta.env.{名称} で取得できないとき。

.env 上で、アプリ内から参照したい値の名称は VITE_ で始まっていること。
.env のファイル名が .env.[mode] である場合、オプション --mode [mode] を指定して vite を実行していること。
vite.config.js で root を指定している場合、その直下に .env ファイルを置いていること。または .env があるディレクトリを envDir を指定していること。

vite 4.1.0

詳細

バックエンドAPIのURLをファイル .env.development に書いてました。

.env.development

VITE_API_URL=http://localhost:3000/

ファイル .env.[mode] に書かれていて名称のプレフィックスが VITE_ である値は、オプション --mode [mode] でモード指定して vite を実行した場合に、アプリ内から import.meta.env.{名称} で利用できるはずです。

(ファイル .env の場合も、モードを問わないだけで同じです。)

環境変数とモード | Vite

なのでこの場合、以下の通りになるはずです。

起動コマンド

npx vite --mode development

src/main.tsxなどアプリ内のファイル

console.log(import.meta.env.VITE_API_URL);
// -> http://localhost:3000/

が、実際にはなぜか import.meta.env.VITE_API_URL が undefined でした。import.meta.env の内容を確認してもビルトインの変数しかセットされてませんでした。

それで改めて確認したところ、.env はViteのルートディレクトリの直下に置く必要があったようでした。

今回、私は .env.development をプロジェクト直下に置いていましたが、実際にはViteのルートディレクトリを vite.config.js の root 属性で変更していたので、プロジェクト直下とViteのルートディレクトリがずれてしまっていました。

なので私は .env.development をViteのルートディレクトリ直下に移動させるか、または vite.config.js に envDir 属性を追加することで .env の場所を教えてやる必要がありました。

ディレクトリ構成

 /
  +-- src/
  |    +-- main.tsx
  |    +-- index.html
  |    +-- vite-env.d.ts
  |    +-- ...
  |
  +-- .env
  +-- .env.development
  +-- vite.config.ts

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  root: 'src',
  envDir: '../',  // これを追加
  build: {
    outDir: '../dist',
  }
});

以上。