Vue から環境に応じて laravel の環境変数を参照するには【Laravel×Vue，Laravel-mix】

私は今，laravel-mix を使って，Laravel×Vue のプロジェクトを作っています．
Vueで axios を使うとき，以下のようにすれば axios の baseURL を laravel の.envファイルから設定できると思います．

let $axios = axios.create({
    baseURL: process.env.MIX_BASE_URL,
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json'
    }
})

.env

...
MIX_BASE_URL=http://localhost:8000
...

しかし，開発環境と本番環境で baseURL を切り替えたいときにどうすれば良いのか分からず，悩みました．
バージョンは以下の通りです．

• Laravel : 8.73.2
• laravel-mix : 6.0.6
• Vue : 2.6.12

解決

がとても参考になりました！

1. 開発環境と本番環境用にenvファイルを作成

今回は，.env ファイルをコピーして，開発環境用に env/.env.dev，本番環境用にenv/.env.prod を作成しました．元の .env ファイルは削除しました．また，各envファイルにMIX_BASE_URLを設定しました．

env/.env.dev

// ... 略

APP_ENV=development
MIX_BASE_URL=http://localhost:8000

// ... 略

env/.env.prod

// ... 略

APP_ENV=production
MIX_BASE_URL=本番環境用のBASE_URL

// ... 略

2. 必要なライブラリをインストール

npm install mix-env-file dotenv cross-env --save-dev

3. webpack.mix.js を編集

webpack.mix.js

const mix = require('laravel-mix'); 

require('mix-env-file'); // 追加


mix.browserSync({
    proxy: '0.0.0.0:8081', 
    open: false 
  }).js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css').version();

mix.env(process.env.ENV_FILE); //追加

4. package.json を編集

package.json

// ... 略

"scripts": {
        "dev": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev npm run development",
        "development": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev mix",
        "watch": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev mix watch",
        "watch-poll": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev mix watch -- --watch-options-poll=1000",
        "hot": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev mix watch --hot",
        "prod": "cross-env NODE_ENV=production ENV_FILE=env/.env.prod npm run production",
        "production": "cross-env NODE_ENV=production ENV_FILE=env/.env.prodmix --production",
        "heroku-postbuild": "cross-env NODE_ENV=production ENV_FILE=env/.env.prod npm run prod",
    },
// ... 略

cross-env NODE_ENV=~ ENV_FILE=~ の部分で，コマンドごとに読み込む env ファイルを切り替えることができます．例えば、npm run watch-pollを実行したら env/.env.devファイルが読み込まれるので、Vueのprocess.env.MIX_BASE_URLにはhttp://localhost:8000が入ります。

5. Laravel 側でも 環境に応じて参照するenvファイルを切り替える

laravel 側でも開発環境ではenv/.env.dev 、本番環境ではenv/.env.prodを読み込む必要があります．

こちらの記事を参考に，bootstrap/app.jsを編集しました．

bootstrap/app.php

// ... 略

/*
|--------------------------------------------------------------------------
| 環境によって読み込む.envファイル切り替え
|--------------------------------------------------------------------------
*/

switch ($_SERVER['SERVER_NAME'] ?? 'localhost') {
    case 'localhost':
        $app->loadEnvironmentFrom('.env.dev');
        break;
    default:
        $app->loadEnvironmentFrom('.env.prod');
        break;
   
}

// ... 略

まとめ

package.json の cross-envの部分で読み込む envファイルを切り替えるところがポイントかなと思います！間違いや気づいた点などがありましたら，ぜひご指摘いただきたいです．よろしくお願いいたします！