◀ 53.

Laravel .env の値を Vue.js で参照する方法｜MIX_ プレフィックスと VITE_ への移行

▶
この記事の要点
  • Laravel の .env 値を Vue.js 側で参照する方法
  • Mix (旧 Laravel 9 以前): キー名に MIX_ プレフィックス → Vue 側 process.env.MIX_API_URL
  • Vite (Laravel 9.19+ 推奨): キー名に VITE_ プレフィックス → Vue 側 import.meta.env.VITE_API_URL
  • ビルド時に埋め込まれる → npm run dev/build 後に値が反映
  • 機密情報はフロント露出 NG — API キー等はバックエンド側で扱う

概要

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 テンプレート内
<template>
    <h1>{{ appName }}</h1>
</template>
<script setup>
const appName = import.meta.env.VITE_APP_NAME;
</script>

// 全変数を見る
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 --}}
<!DOCTYPE html>
<html>
<head>
    <script>
        window.AppConfig = @json([
            'apiUrl' => config('app.api_url'),
            'appName' => config('app.name'),
            'csrfToken' => csrf_token(),
            'userId' => auth()->id(),
        ]);
    </script>
</head>
<body>
    <div id="app"></div>
    @vite('resources/js/app.js')
</body>
</html>
// Vue 側
const apiUrl = window.AppConfig.apiUrl;
const userId = window.AppConfig.userId;

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

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

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

OK（フロント露出可）NG（バックエンドのみ）
API のベース URLDB パスワード
アプリ名JWT 署名キー
環境名（production/staging）Stripe シークレットキー
Google Maps の公開キーAWS Secret Access Key
Sentry DSN（半公開）メール SMTP パスワード

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 はダメ。スペースなし
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストールと設定
  2. クイックスタート & チュートリアル(初心者向け)
  3. クイックスタート & チュートリアル(中級者向け)
  4. ルーティング
  5. Bladeテンプレート(ビュー/レイアウト)
  6. コントローラー
  7. マイグレーションとテーブル定義
  8. データベースの設定
  9. Eloquentモデル (ORM)
  10. SQLとクエリビルダー
  11. バリデーション
  12. .envファイルの設定値へのアクセス
  13. 動作環境による分岐処理
  14. configフォルダ配下の設定値へのアクセス
  15. assetヘルパーを利用したpublicフォルダへのアクセス
  16. storageフォルダへのアクセス
  17. アプリケーション名の変更
  18. メンテナンス
  19. ログイン画面(認証システム)の作成
  20. ログインの必須化
  21. ログインユーザー情報の取得
  22. ルートの認証化
  23. 本番サーバーへのデプロイ方法
  24. 多言語化
  25. csrf_field
  26. ファイルのダウンロード
  27. CSVのアップロードおよび読み込み(maatwebsite/excel)
  28. ページタイトルの設定
  29. コマンド一覧
  30. エラー一覧
  31. SQLの実行ログ出力方法
  32. キャッシュのクリア
  33. Selectの結果の最初もしくは最後に任意の値を追加する方法
  34. ajaxでPOST通信する際の注意点
  35. ソーシャルログインの実装
  36. セッション情報の確認
  37. ログイン、ユーザー登録、パスワードリセット後のリダイレクト先の変更方法
  38. redirectやreturn viewにメッセージを付与する方法
  39. クッキー(cookie)の設定と取得
  40. クラスの再読み込み
  41. csrfの有効時間を変更する方法
  42. ViewComposerを用いてviewに共通の値を付与する方法
  43. View::shareを用いて共通の値を各ビューに渡す方法
  44. ミドルウェアを用いた処理の共通化
  45. Middleware内でAuth::check()などを使用する方法
  46. Controller以外でリダイレクトする方法
  47. セッションの値の取得/保存/更新/削除
  48. $requestの値を変更する方法
  49. 常時SSL化
  50. ページング(ページネーション)をする方法
  51. vue.jsとの連携
  52. Vue.jsと連携するSPA実行環境構築
  53. .envの値をvue.jsで参照する方法
  54. vue.jsを本番環境にリリースする方法
  55. could not find driver（Windows, MySQL編）
2026-06-11 07:12:00 guest 2618

人気ページ

最近更新/作成されたページ