Laravel 前端環境使用教學

說明

本篇要分享 Laravel 前端環境，這是前端相當實用的功能，能夠讓開發者在 Laravel 專案中使用 Vite 來管理前端資源，並輕鬆注入環境變數，避免將敏感資訊硬編碼到程式碼中，提高安全性與可維護性。

本篇內容大部分都是複製 Larvel 官方文件，再加上自己補充說明。

定義環境變數

在專案的 .env 檔中，只要為環境變數名稱冠上 VITE_ 前置詞，就可將這些環境變數注入到 JavaScript 中：

VITE_SENTRY_DSN_PUBLIC=http://example.com

使用

可以使用 import.meta.env 物件來存取注入的變數：

import.meta.env.VITE_SENTRY_DSN_PUBLIC

範例

// 輸出: http://example.com
console.log(import.meta.env.VITE_SENTRY_DSN_PUBLIC);

執行 Vite

要執行 Vite 有兩種方法。一種是使用 dev 指令來執行開發伺服器，適合用在本機環境開發時。開發伺服器會自動偵測任何檔案的修改，並自動反應到所有開啟的瀏覽器視窗中。

或者，也可以執行 build 指令。build 指令會為專案的素材加上版本，並打包這些素材，讓我們可以將其部署到正式環境中：

# Run the Vite development server...
npm run dev

# Build and version the assets for production...
npm run build

我使用的 Laravel 12 版本，開發時使用的指令是:

composer run dev

意思都差不多，只是這個指令除了 npm run dev 之外，還有執行其他指令。

可參考 https://laravel.com/docs/12.x/installation

參考

• Laravel 打包素材