日期: 2025 年 4 月 16 日

composer run dev error

作者:

composer run dev

Composer\Config::disableProcessTimeout
npx concurrently -c "#93c5fd,#c4b5fd,#fb7185,#fdba74" "php artisan serve" "php artisan queue:listen --tries=1" "php artisan pail --timeout=0" "npm run dev" --names=server,queue,logs,vite
'npx' is not recognized as an internal or external command,
operable program or batch file.
Script npx concurrently -c "#93c5fd,#c4b5fd,#fb7185,#fdba74" "php artisan serve" "php artisan queue:listen --tries=1" "php artisan pail --timeout=0" "npm run dev" --names=server,queue,logs,vite handling the dev event returned with error code 1

這個錯誤訊息的關鍵在這一段：

'npx' is not recognized as an internal or external command,
operable program or batch file.

意思是系統找不到 npx 指令，通常這表示你尚未安裝 Node.js 或是安裝後沒有把 Node.js 的執行檔加入到環境變數 PATH 中。

✅ 解決方法：

1. 確認是否安裝 Node.js

打開命令提示字元（CMD）或 PowerShell，輸入：

node -v
npm -v
npx -v
  • 如果出現錯誤表示沒安裝。
  • 如果 node、npm 有版本，但 npx 沒有，表示環境變數可能有問題。

2. 安裝 Node.js（如果尚未安裝）

請到官方網站下載安裝程式：

🔗 Node.js 官方網站

  • 選擇 LTS 版本安裝即可（例如：v20.x LTS）
  • 勾選安裝選項時，確保選擇了 “Add to PATH”

3. 安裝完後重啟終端機（或重新登入）

然後重新輸入：

npx -v

如果正常出現版本號，就表示你可以繼續使用：
composer run dev

小提醒：你這段 composer.json 裡的 scripts 是這樣的：

"scripts": {
  "dev": "npx concurrently ...",
}

如果你還沒安裝 concurrently，也可能會出錯，這時候可以執行：

npm install concurrently --save-dev

Laravel 12 + Livewire 3 專案目錄結構索引

作者:

本索引詳細說明 Laravel 12 搭配 Livewire 3 的專案目錄結構，包括各主要目錄、前後端整合、測試目錄、常用套件以及部署相關檔案的用途，方便開發者快速查閱。

Laravel 預設目錄結構

根目錄（Project Root）

包含專案入口與設定檔，例如 .env（環境變數）、composer.json（PHP 相依）、package.json（前端相依）以及 artisan 指令檔。這些都是專案初始化與執行的關鍵。

app/

應用程式核心邏輯，幾乎所有 PHP 類別都放在此目錄。預設命名空間為 App，由 Composer PSR-4 自動載入。

  • Models/：Eloquent 資料模型。
  • Http/：處理 HTTP 請求，包括：
    • Controllers/ 控制器
    • Middleware/ 中介層
    • Requests/ 表單驗證類別
  • Console/：自訂 Artisan 指令。
  • Livewire/：Livewire 3 預設元件類別位置。
  • 其他目錄：如 Events/, Jobs/, Listeners/ 依需求產生。

bootstrap/

框架啟動目錄，含 app.php（應用啟動點）與 cache/（快取檔案）。

config/

應用的所有設定檔目錄，如 app.php, database.php, fortify.php 等，建議熟讀調整。

database/

包含與資料庫操作有關的檔案：

  • migrations/：資料表版本遷移。
  • factories/：假資料產生器。
  • seeders/：資料填充。

lang/

語言檔案，支援多語系，可放 en/, zh_TW/ 等資料夾。

public/

網頁入口目錄，含 index.php。用來放置靜態資源（JS、CSS、圖片）。

  • storage/ 是指向 storage/app/public 的符號連結，用於公開檔案（需執行 php artisan storage:link）。

resources/

前端資源檔案：

  • views/：Blade 模板與 Livewire 專用視圖。
  • css/：Tailwind 或其他 CSS 原始檔。
  • js/：主 JS 檔與各類 JS 模組（含 Alpine.js 設定）。
  • lang/：應用語系檔案。

routes/

路由定義目錄：

  • web.php：Web 端點。
  • api.php：API 路由（需 artisan install:api 啟用）。
  • console.php：CLI Artisan 路由。
  • channels.php：事件廣播（需 artisan install:broadcasting 啟用）。
  • livewire.php：Livewire Page Route（選用，Jetstream 預設使用）。

storage/

系統存儲目錄：

  • app/：用戶上傳檔案。
  • framework/：快取、session、視圖編譯檔。
  • logs/：log 檔（如 laravel.log）。

tests/

測試目錄：

  • Feature/：功能整合測試。
  • Unit/：單元測試。
  • 可自建 Livewire/ 來分類 Livewire 測試。
  • 測試執行使用 php artisan test。

vendor/

Composer 安裝的 PHP 套件，不建議手動修改。

Livewire 3 結構與 routes/livewire.php

app/Livewire/

Livewire 元件類別目錄，每個元件為一個 class。

resources/views/livewire/

對應元件的 Blade 視圖，命名與 class 對應。

routes/livewire.php

由 Jetstream (Livewire 栈) 使用的內部路由檔案，包含註冊、登入、使用者設定等功能頁面，不需要自行維護。

前端整合：Vite + Alpine.js + Tailwind CSS

vite.config.js

Vite 的打包與熱更新設定檔。

tailwind.config.js

Tailwind 設定檔，定義掃描範圍、主題、plugins 等。

postcss.config.js

PostCSS 設定檔，預設包含 tailwindcss 與 autoprefixer 插件。

resources/js/

包含 app.js, bootstrap.js，初始化 JS，包括 Alpine.js 與 Axios。

resources/css/

預設 app.css 引入 Tailwind 指令。

測試與支援結構

tests/Feature/

包含 Livewire 測試，如 Livewire::test(Component::class)，測試互動與 DOM。

tests/Unit/

測試單一方法或純邏輯，不依賴框架。

phpunit.xml

測試環境設定，指定 bootstrap 與測試目錄。

套件整合：Jetstream / Fortify / Sanctum

Jetstream

  • 安裝後產生 config/jetstream.php
  • 視圖在 resources/views/auth、Livewire 在 app/Actions/
  • 使用 Fortify 作為後端認證服務
  • 使用 Sanctum 提供 API Token

Fortify

  • 安裝後產生 config/fortify.php
  • 提供無 UI 的認證路由與邏輯
  • 視圖需自行註冊 loginView, registerView 等

Sanctum

  • 提供 API Token 認證
  • 安裝後有 config/sanctum.php
  • 提供 personal_access_tokens 資料表
  • 支援 SPA cookie 模式與 token 模式

部署與 CI/CD 支援

.github/workflows/

GitHub Actions 設定目錄，常見如 laravel.yml 實作 CI/CD 流程。

Dockerfile

定義 PHP 應用容器的建置流程。

docker-compose.yml

定義多容器開發環境（Laravel + MySQL + Redis 等）。

.env.production / .env.staging

多環境設定檔。

重要設定檔彙整

檔案用途簡述
.env環境變數設定
composer.jsonPHP 套件與自動載入
package.jsonJS 套件與執行腳本
vite.config.js前端資源打包與熱更新設定
tailwind.config.jsTailwind 主題與掃描設定
postcss.config.jsCSS 編譯管線（Tailwind + Prefix）
phpunit.xml測試設定
config/*.php所有應用設定

以上說明可作為你未來開發 Laravel 12 + Livewire 3 專案時的架構索引與快速參考。