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

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

# 解決

https://qiita.com/akitkat/items/6af26de0af8ebd0c549c 

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

### 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 を編集

```javascript: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 を編集

```javascript: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を編集しました．

https://qiita.com/mmmmmmanta/items/b992c7d8cd69343b6626

```php: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ファイルを切り替えるところがポイントかなと思います！間違いや気づいた点などがありましたら，ぜひご指摘いただきたいです．よろしくお願いいたします！