過去バージョン

概要

Laravel の .env に書いた値を Vue.js / フロントエンド JavaScript で参照したい場合、専用のプレフィックスを付けた変数だけがビルド時にフロントに公開されます。これは機密情報の意図しない流出を防ぐ仕組みです。

Vite の場合（Laravel 9.19+ 推奨）

Laravel 9.19 以降は Vite が標準ビルドツールになりました。プレフィックスは VITE_:

# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME="My App"
VITE_GOOGLE_MAPS_KEY=AIzaSy...

// Vue コンポーネント / JS ファイル
const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl);
// → "https://api.example.com"

// Vue テンプレート内



// 全変数を見る
console.log(import.meta.env);
// → { VITE_API_URL: "...", VITE_APP_NAME: "...", BASE_URL: "/", MODE: "production", ... }

Mix の場合（Laravel 9 以前 / レガシー）

古い Laravel では Mix (webpack ラッパー) を使用。プレフィックスは MIX_:

# .env
MIX_API_URL=https://api.example.com
MIX_APP_NAME="My App"
MIX_SAMPLE=123

// Vue コンポーネント / JS ファイル
const apiUrl = process.env.MIX_API_URL;
console.log(apiUrl);  // → "https://api.example.com"

const value = process.env.MIX_SAMPLE;  // → "123" (文字列で返る)

ビルド必須

これらの値はビルド時に静的に埋め込まれます。.env を変更したら必ず再ビルド:

# 開発時（HMR 監視）
npm run dev
# Vite なら自動で再ビルドされる

# 本番ビルド
npm run build           # Vite
npm run production      # Mix

# .env 変更後は dev サーバを一度止めて再起動

config 経由で渡す方法（推奨パターン）

直接 .env 値を JS に埋め込むのではなく、Blade 経由で渡す方が柔軟:

{{-- resources/views/layouts/app.blade.php --}}



    


    

    @vite('resources/js/app.js')

// Vue 側
const apiUrl = window.AppConfig.apiUrl;
const userId = window.AppConfig.userId;

// この方式の利点:
// 1. ビルド不要（Blade レンダリング時に値が決まる）
// 2. ユーザ依存の値を埋め込める（userId / 権限 等）
// 3. 動的な設定（時刻・抽選結果）にも対応可能

注意: フロントに露出していい値だけ

VITE_ / MIX_ プレフィックスを付けた値はビルド成果物の JS に埋め込まれます。ブラウザの開発者ツール / view-source で読めるため、機密情報は絶対に付けない:

Mix から Vite への移行

Laravel 9.19+ で新規プロジェクトを作ると Vite がデフォルト。既存の Mix プロジェクトを Vite に移行する場合:

# 1. 依存削除・追加
npm remove laravel-mix
npm install --save-dev vite laravel-vite-plugin

# 2. .env の MIX_ → VITE_ にリネーム
sed -i 's/^MIX_/VITE_/' .env

# 3. JS / Vue 内の参照を書き換え
# process.env.MIX_FOO → import.meta.env.VITE_FOO

# 4. webpack.mix.js → vite.config.js
# 5. Blade で @vite ディレクティブを使うように変更

環境ごとに値を変える

開発・ステージング・本番で別の値を使う場合:

# 開発: .env (or .env.local)
VITE_API_URL=http://localhost:8000/api

# 本番: .env.production
VITE_API_URL=https://api.example.com

# ビルド時に環境を指定
npm run build -- --mode production

よくあるハマりどころ

• 値が undefined になる: プレフィックス忘れ。VITE_ / MIX_ が付いているか確認
• 再ビルドしていない: .env 変更後は必ず npm run dev/build
• HMR で反映されない: .env 変更は HMR でも検知しない場合あり → dev サーバ再起動
• 本番だけ undefined: 本番用 .env が VITE_ プレフィックス付きで設定されているか CI/CD で確認
• キー名のスペース: VITE_API URL=xxx はダメ。スペースなし