Vue + Vite環境でprocess.env未定義エラーを解決する方法

VueとTypeScriptのプロジェクトでprocess.env.var_nameを使用しようとした際に、「Uncaught ReferenceError: process is not defined」というエラーが発生する問題について解説します。このエラーは主にViteビルドツールを使用している場合に発生します。

問題の原因

このエラーの主な原因は、Viteが従来のprocess.envではなく、import.meta.envを使用するためです。

Viteと環境変数

Viteは従来のwebpackベースのセットアップとは異なり、ブラウザ環境でprocessオブジェクトを自動的に提供しません。代わりにESモジュールのimport.meta.envを使用します。

解決方法

方法1: import.meta.envを使用する（推奨）

Viteでは環境変数にアクセスするためにimport.meta.envを使用します。

// process.envの代わりにimport.meta.envを使用
const isProduct = import.meta.env.VITE_APP_ENV === "prod";

// APIエンドポイントの例
const { data } = await axios.post(
  `${import.meta.env.VITE_API_URL}/register`,
  {
    name,
    email,
    password,
  }
);

方法2: 環境変数の命名規則

Viteでは、クライアント側に公開する環境変数はVITE_プレフィックスが必要です。

# .envファイルの例
VITE_APP_ENV=prod
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

重要

VITE_プレフィックスのない環境変数はクライアントバンドルに含まれないため、ブラウザからアクセスできません。

方法3: vite.config.jsでの設定（レガシーコード対応）

既存のコードでprocess.envを使用している場合、vite.config.jsで以下のように設定できます。

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    define: {
      "process.env": env,
    },
    plugins: [vue()],
    // その他の設定...
  });
};

注意

この方法は互換性のための中間的な解決策です。新しいコードではimport.meta.envを使用することを推奨します。

ビルドモードの判別

開発モードと本番モードを判別するには：

// 開発モードかどうか
const isDevelopment = import.meta.env.DEV;

// 本番モードかどうか  
const isProduction = import.meta.env.PROD;

// またはカスタム環境変数を使用
const isProduct = import.meta.env.VITE_APP_ENV === "prod";

よくある間違いと回避策

間違ったアプローチ

// これは動作しません
mounted() {
  window.process = {
    env: {
      NODE_ENV: 'development'
    }
  }
}

WARNING

この方法は一時的な回避策であり、本番環境では問題が発生する可能性があります。公式の方法を使用してください。

dotenvパッケージについて

Viteは組み込みで環境変数のサポートを提供しているため、通常はdotenvパッケージを追加でインストールする必要はありません。

まとめ

Viteを使用するVueプロジェクトでは：

1. process.envの代わりにimport.meta.envを使用する
2. 環境変数名には必ずVITE_プレフィックスを付ける
3. モード判別にはimport.meta.env.MODEまたはimport.meta.env.PROD/DEVを使用する

これらの変更により、「process is not defined」エラーを解決し、Vite環境で正しく環境変数を使用できるようになります。