現代のフロントエンド開発において、環境変数の設定はプロジェクトの柔軟性と保守性を高める重要な要素です。本記事ではViteとVue3プロジェクトにおける環境変数の設定方法を詳細に解説します。

1.環境変数とは？

環境変数はアプリケーション実行時に動的に取得可能な設定情報を管理する手段です。開発・テスト・本番環境ごとに異なる設定を読み込むことで、柔軟な運用が可能になります。

• 開発環境: コードの作成とデバッグを行う環境（例：開発者PC）
• テスト環境: 機能・性能テストなどを行うための環境
• 本番環境: 実際にユーザーが利用する環境（例：サーバー上での稼働）

2.Vite + Vue3プロジェクトの作成

既にプロジェクトを作成している場合はこの手順を飛ばしてください。新規作成が必要な場合は、Viteを使用したVue3+TSプロジェクトの作成方法を参考にしてください。

3.環境変数の設定

ここでは開発環境と本番環境の2つの設定ファイルを作成します。

3.1 開発環境設定ファイルの作成

プロジェクトルートディレクトリ（srcディレクトリと同レベル）に.env.developmentファイルを作成します。

# .env.development 開発環境設定ファイル

# 開発環境設定
APP_ENV = development

# 起動ポート設定
APP_PORT = 8080

# ブラウザ自動起動設定
OPEN_BROWSER = true

# APIベースURL
API_BASE = http://127.0.0.1:9000

3.2 本番環境設定ファイルの作成

プロジェクトルートディレクトリに.env.productionファイルを作成します。

# .env.production 本番環境設定ファイル

# 本番環境設定
APP_ENV = production

# 起動ポート設定
APP_PORT = 8081

# ブラウザ自動起動設定
OPEN_BROWSER = false

# APIベースURL
API_BASE = http://XX.XX.XX.XX:9000

Viteは現在の環境に応じて.envファイルを自動読み込みします。設定ミスにより不正なファイルが読み込まれると変数が反映されない可能性があります。

3.3 vite.config.tsの修正

vite.config.tsで環境変数を参照するように設定します。

// vite.config.ts

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

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd())
    
    return {
        plugins: [vue()],
        server: {
            port: parseInt(env.APP_PORT),
            open: env.OPEN_BROWSER === 'true'
        }
    }
})

TypeScript環境では@types/nodeのインストールが必要です。

npm install @types/node
# または
yarn add @types/node
# または
pnpm install @types/node

4.設定確認

開発環境でプロジェクトを起動します。

npm run dev

コンソール出力から、.env.developmentに設定したポートが正しく反映されているか確認してください。