【Vue.js】環境ごとにAPIのURLを切り替える方法｜.envファイルの使い方

Vue.jsの開発では、ローカル・ステージング・本番など複数の環境に対応した設定が求められます。特にAPIのURLは環境ごとに異なるため、Vue CLIやViteでは.envファイルを用いて環境変数を定義し、ビルド時に自動で切り替える仕組みが一般的です。この記事では、Vue 3アプリにおける環境ごとのAPI設定の切り替え方法と、import.meta.envやprocess.envの使い分けを解説します。

.envファイルの基本
環境変数を使ってAPI呼び出しを切り替える
現在の環境を確認する
環境の切り替えとビルド
補足：vite.config.js で使用する場合
まとめ

.envファイルの基本

Vue CLIまたはViteのプロジェクトでは、以下のように環境ごとにファイルを分けて設定します：

.env（共通設定）
.env.development（開発環境）
.env.production（本番環境）
.env.staging（ステージングなど任意の拡張）

変数名は必ず VITE_（Viteの場合）または VUE_APP_（Vue CLIの場合）で始める必要があります。

// .env.development
VITE_API_URL=http://localhost:3000/api

// .env.production
VITE_API_URL=https://api.example.com

環境変数を使ってAPI呼び出しを切り替える

コンポーネントやサービスファイルで、環境変数を参照してAPI URLを動的に切り替えます。


// api.js
const baseURL = import.meta.env.VITE_API_URL

export async function fetchUsers() {
  const response = await fetch(`${baseURL}/users`)
  return await response.json()
}

Vue CLIの場合は process.env.VUE_APP_API_URL を使用します。

現在の環境を確認する

console.log(import.meta.env.MODE) // 'development' や 'production'

ViteではMODE、BASE_URL、DEV、PRODなどの特殊変数も使用可能です。

環境の切り替えとビルド

Viteでは以下のように環境を指定してビルドや起動を行います：

# 開発環境で起動
npm run dev

# 本番ビルド
npm run build

# ステージング環境用に指定（vite.config.jsで defineConfig({ mode: 'staging' }) の指定が必要な場合も）
vite build --mode staging

補足：vite.config.js で使用する場合


// vite.config.js
import { defineConfig, loadEnv } from 'vite'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  console.log('API URL:', env.VITE_API_URL)

  return defineConfig({
    define: {
      __API_URL__: JSON.stringify(env.VITE_API_URL)
    }
  })
}