實作 Laravel 9 改用 vite 作為前端編譯檔案配置

作為一個純後端，不會前端也是正常的事(誤)，但該練習的技能線還是得每天練習一點，尤其我是一個前端小廢物，那既然要用Laravel 9 版本來做開發，那就得先試試看vite這個新的工具，基本上這邊就簡單介紹使用方式，另一篇在額外說明Laravel Mix 與 Vite 差別。

首先進行 Laravel 9 安裝

composer create-project --prefer-dist laravel/laravel laravel-demo "9.x"

安裝yarn (線上教學都是使用NPM，我個人偏好 yarn )

yarn install

安裝Laravel 9 版後自動幫你配置好 Vite 檔案設定，在 Laravel 9 專案中多了vite.config.js 檔案

而原本package.json檔案，也變更成以下這樣。

而在Blade頁面前端檔案編譯將改為以下這樣

整個welcome.blade.php，配置如下

這樣就完成前端Vite的編譯設置了，接下來要看到welcome.blade.php檔案首頁，得先執行yarn dev進行編譯，就可以看到正常頁面了

yarn dev

由於@vite('resources/js/app.js')，作為編譯的JavaScript 入口，故這邊如果要寫一個登入帳號的操作，首先需要綁定我的 Login 按鈕的 Id，並寫一個login.js的邏輯。

簡單刻一個Login頁面，在login按鈕綁定id="create_form"

<a type="submit" id="create_form" class="btn btn-primary btn-lg">Login</a>

在resourse/js資料夾下，撰寫login.js的邏輯

接著在resourse/js/app.js 檔案裡引入login.js，這樣就能正常引入該JS的檔案，並進行編譯。

操作畫面確認是否有綁定按鈕成功，並成功跳出alert通知

確認正常編譯JS檔案後，就可以開始撰寫JS邏輯啦～

而如果需要取得.env環境變數的資料，例如我這邊要使用環境變數的APP_URL=http://127.0.0.1:8000，這串url到我的JS檔案裡，則以VITE_前綴進行設置，如下圖

接著在JS檔案裡面引用，使用Vite下環境變數基本上可使用import.meta.env，且只會根據前綴為VITE的變數進行暴露到前端，這邊引入我前面設定APP_URL，並嘗試印出。

接著執行點擊按鈕看看是否正確拿到url，這邊看到可以正常取得本地路由，就設定完成啦。

總結：以上就是採用Laravel 9 搭配JS 並使用Vite前端編譯工具進行開發，對於還沒學Vue前端框架的我來說的大致配置實作，如有更好配置，歡迎交流XDD

附上如果是升版要使用 Vite ，Mix and Vite 差異github文件參考

https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite

Vite dotenv 載入文檔參考
https://vitejs.dev/guide/env-and-mode.html#env-files