Vue.jsの開発では、ローカル・ステージング・本番など複数の環境に対応した設定が求められます。特にAPIのURLは環境ごとに異なるため、Vue CLIやViteでは.env
ファイルを用いて環境変数を定義し、ビルド時に自動で切り替える仕組みが一般的です。この記事では、Vue 3アプリにおける環境ごとのAPI設定の切り替え方法と、import.meta.env
やprocess.env
の使い分けを解説します。
.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)
}
})
}
まとめ
Vue.jsでは.env
ファイルを活用することで、環境ごとのAPIエンドポイントの切り替えが簡単に実現できます。ViteとVue CLIではプレフィックスが異なる点に注意が必要ですが、開発・テスト・本番と柔軟に環境を切り替えることができ、設定ミスの防止や運用の効率化にもつながります。