Windows(WSL)を使ったLaravel10 × sail × Vue.js環境構築

# 開発環境
- windows環境
windows10, windows11
- wsl
- docker
# Laravel sailの導入
- Dockerが立ち上がっていることを確認
- Dockerを導入していない方は下記で導入の記事を投稿していますのでこちらへ
https://qiita.com/ys05181406/items/49fa9d9de286f0a474ef
- 下記の画面が出ていたら立ち上がっています
![スクリーンショット (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/2ded05eb-e1d1-da13-2795-d665f117fa6a.png)

- ターミナルにてUbuntu 22.04 LSTを選択
![スクリーンショット (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/94f405bf-ef7c-956e-2167-7135ef579ee3.png)

- 下記のコマンドのprojectNameに作成したいプロジェクト名を記入
- ターミナルにて実行
```
curl -s https://laravel.build/projectName | bash
```
- ディレクトリの移動をし、dockerコンテナの立ち上げ
```
cd projectName
./vendor/bin/sail up -d --build
```
- 立ち上がったことが確認出来たら http://localhost にアクセス
![スクリーンショット 2023-08-11 181906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/a9b87327-60e1-99ef-18d8-d77af557cf47.png)
- 上記の画面が出ていたら成功です。
- 下記のコマンドを実行後パスワードを聞かれるのでパスワードを入力を行いEnter
```
sudo vi ~/.bashrc
```
- 下記の画面が表示されるので```i```を押し書き込みモードに変更
![スクリーンショット 2023-08-11 182546.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/f8d7218b-94d2-4834-bca6-babfadb64683.png)
- 一番下に下記の追記を行う
```
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
```
- ```ESC```を押し```:wq```を入力しEnterで保存し、viを終了
- 最後に下記のコマンドを実行し、設定を反映
```
source ~/.bashrc
```
- これで```./vendor/bin/sail up -d --build```のようなコマンドを```sail up -d --build```で実行することができます。
# Laravel Breeze, Vue.js導入
- 下記のコマンドを実行してLaravel Breezeを導入してください
```
sail composer require laravel/breeze --dev
```
- 下記のコマンドを実行
```
sail php artisan breeze:install vue
sail php artisan migrate
sail npm install
sail npm run dev
```
- この状態でhttp://localhost にアクセスしてみるとさっきまで移っていたLaravelの初期画面がなくなっていることが確認できると思います。
![スクリーンショット 2023-08-11 191613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/8faeeb42-16c5-9e4f-2043-a986d83a4d9f.png)
- Windows(WSL)のみに起こるバグらしくVue.jsを導入後```sail npm run dev```を行うと表示されません
- ターミナルにて```ctr + c```で```sail npm run dev```を終了させてください
- 作成したプロジェクトディレクトリ内の```vite.config.js```の中身を確認
- 下記のコードが記述されていると思います
```vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
```
- 下記をコピペして貼り付けてください
```vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],

    server: {
        hmr: {
            host: 'localhost',
        },
    },
});
```
- 内容としては下記を追記しただけです
```vite.config.js
    server: {
        hmr: {
            host: 'localhost',
        },
    },
```
- 改めて```sail npm run dev```を実行してhttp://localhost にアクセスしてみましょう
![スクリーンショット 2023-08-11 181906.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489096/a9b87327-60e1-99ef-18d8-d77af557cf47.png)
- Laravelの初期画面が出ていたら成功です
- Vue.jsを使って開発を行うときは```sail npm run dev```を実行した状態で開発を行うことでリロードを行わずにリアルタイムに表示の変更がされるので開発効率を上げることができます。
- 最後に```sail down```を実行することで```sail up -d --build```で立ち上げたコンテナ落とすことができます。
- 今後ともWindows(WSL)を使った環境構築の記事を投稿しようと思っていますのでいいね！を押していただけたらと思います。