Itroad 連結你的所需
查詢對照

Laravel + Vue.js 專案的 Composer、NPM、Vite、Laravel Mix 與前端建置常用指令

更新 2026.09.21

專案依賴安裝

Laravel PHP Dependencies：

composer install

Vue / JavaScript Dependencies：

npm install

簡寫：

npm i

完整重新安裝

清除 PHP 與 Node.js Dependencies：

rm -rf vendor
rm -rf node_modules
composer install
npm install

如需同時重新建立前端 Production Assets：

rm -rf vendor
rm -rf node_modules
composer install
npm install
npm run build

NPM 更新

查看版本：

node -v
npm -v

更新全域 NPM：

npm install -g npm@latest

更新後確認：

npm -v

一般專案不需要每次重新安裝 Dependencies 都執行 npm install -g npm@latest。

Vite

新版 Laravel 主要使用 Vite。

開發模式：

npm run dev

Vite 會啟動 Development Server，修改 Vue、JavaScript 或 CSS 後自動更新。

Production Build：

npm run build

通常輸出到：

public/build/

Vue + Vite

安裝 Vue：

npm install vue

安裝 Vite Vue Plugin：

npm install --save-dev @vitejs/plugin-vue

常見 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/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});

Vue Entry：

import { createApp } from 'vue';

const app = createApp({});

app.mount('#app');

Laravel + Vite 開發

Backend：

php artisan serve

Frontend：

npm run dev

也可分別開兩個 Terminal：

Terminal 1
php artisan serve

Terminal 2
npm run dev

新版 Laravel 專案亦可能提供：

composer run dev

用來一次啟動 Laravel 開發環境相關服務。

Production Build

Production Deployment 常見流程：

composer install --no-dev --optimize-autoloader
npm install
npm run build
php artisan optimize

若已有 package-lock.json，CI / Production Deployment 通常可使用：

npm ci
npm run build

npm install 與 npm ci

一般開發：

npm install

或：

npm i

依照 Lock File 完整安裝：

npm ci

npm ci 常用於：

  • CI/CD
  • Docker Build
  • Production Deployment
  • 需要固定 Dependency Version 的環境

清除 node_modules

Linux / macOS：

rm -rf node_modules
npm install

同時清除 Lock File：

rm -rf node_modules
rm package-lock.json
npm install

不建議沒有原因就刪除 package-lock.json，否則 Dependency Version 可能產生變化。

清除 vendor

rm -rf vendor
composer install

如果 Composer Autoload 有問題，可以先：

composer dump-autoload

通常不需要直接刪除整個 vendor。

完整 Clean Install

一般：

rm -rf vendor
rm -rf node_modules

composer install
npm install

php artisan optimize:clear
npm run build

開發模式：

rm -rf vendor
rm -rf node_modules

composer install
npm install

php artisan optimize:clear
npm run dev

Laravel Cache

修改 Laravel 設定後：

php artisan optimize:clear

或分別：

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear

Vite Cache

如果 Vite Dependency Cache 出現問題：

rm -rf node_modules/.vite
npm run dev

如果問題仍存在：

rm -rf node_modules
npm install
npm run dev

package.json

查看可執行 Script：

npm run

新版 Laravel 常見：

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

因此：

npm run dev

相當於：

vite

而：

npm run build

相當於：

vite build

Laravel Mix

舊版 Laravel 專案可能使用 Laravel Mix / Webpack。

通常可從專案是否存在：

webpack.mix.js

判斷。

開發 Build：

npm run dev

監聽檔案：

npm run watch

Polling：

npm run watch-poll

Production Build：

npm run production

watch-poll

舊版 Laravel Mix：

npm run watch-poll

主要用於：

  • Docker
  • Virtual Machine
  • Vagrant
  • Shared Folder
  • File Change Event 無法正常觸發的環境

它會定期檢查檔案是否改變。

Laravel Mix 6 常見 Script：

{
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    }
}

也可直接使用：

npx mix watch --poll

新版 Laravel + Vite 通常不需要 npm run watch-poll。

判斷 Vite 或 Mix

如果專案有：

vite.config.js

通常使用：

npm run dev
npm run build

如果專案有：

webpack.mix.js

通常使用 Laravel Mix：

npm run dev
npm run watch
npm run watch-poll
npm run production

實際仍應查看：

package.json

內的：

"scripts"

Vue Dependencies

查看已安裝 Vue：

npm list vue

查看 Vue Version：

npm list vue

查看 Vite：

npm list vite

查看 Laravel Vite Plugin：

npm list laravel-vite-plugin

查看所有頂層 Dependencies：

npm list --depth=0

更新 NPM Package

查看可更新 Package：

npm outdated

更新符合 package.json Version Range 的 Package：

npm update

安裝指定 Package：

npm install PACKAGE_NAME

安裝 Development Dependency：

npm install --save-dev PACKAGE_NAME

移除 Package：

npm uninstall PACKAGE_NAME

Vue Router

安裝：

npm install vue-router

Pinia

安裝：

npm install pinia

Axios

安裝：

npm install axios

TypeScript

安裝 TypeScript：

npm install --save-dev typescript

Vue TypeScript Checker：

npm install --save-dev vue-tsc

執行 Type Check：

npx vue-tsc --noEmit

Laravel + Vue Docker

進入 Workspace：

docker compose exec workspace bash

安裝 PHP Dependency：

docker compose exec workspace composer install

Laravel：

docker compose exec workspace php artisan optimize:clear

如果 Node.js 位於 Workspace：

docker compose exec workspace npm install
docker compose exec workspace npm run dev

Production Build：

docker compose exec workspace npm run build

Laradock

進入 Workspace：

docker compose exec workspace bash

然後：

composer install
npm install
npm run dev

Production：

composer install
npm install
npm run build

常見問題

Vue 修改後沒有更新

Vite：

npm run dev

仍有問題：

rm -rf node_modules/.vite
npm run dev

舊 Laravel Mix / Docker：

npm run watch-poll

找不到 node_modules

npm install

找不到 vendor

composer install

Composer Class 找不到

composer dump-autoload

Laravel Cache 問題

php artisan optimize:clear

Frontend Build 異常

先嘗試：

rm -rf node_modules
npm install
npm run build

完全重新安裝仍失敗

rm -rf vendor
rm -rf node_modules

composer install
npm install

php artisan optimize:clear
npm run build

常用開發流程

第一次 Clone：

composer install
npm install

cp .env.example .env
php artisan key:generate
php artisan migrate

npm run build

開始開發：

composer run dev

或分開：

php artisan serve
npm run dev

Production：

composer install --no-dev --optimize-autoloader
npm ci
npm run build
php artisan migrate --force
php artisan optimize

快速指令表

指令 用途
composer install 安裝 Laravel PHP Dependencies
npm install 安裝 Node.js Dependencies
npm i npm install 簡寫
npm ci 依照 Lock File 重新安裝 Dependencies
npm run dev 啟動 Vite Development Server
npm run build 建立 Production Frontend Assets
composer run dev 啟動新版 Laravel Development Environment
npm run watch Laravel Mix 持續監聽檔案
npm run watch-poll Laravel Mix Polling 模式
npm run production Laravel Mix Production Build
npm outdated 查看可更新 NPM Package
npm update 更新 NPM Package
npm list --depth=0 查看已安裝主要 Package
php artisan optimize:clear 清除 Laravel Cache

原有指令整理

原：

rm -rf vendor
rm -rf node_modules
composer install
npm install -g npm@latest
npm i
npm run build

建議一般改為：

rm -rf vendor
rm -rf node_modules
composer install
npm install
npm run build

因為：

npm install

與：

npm i

作用相同，不需要連續執行。

npm install -g npm@latest 也不需要放在每次專案 Dependency Installation 流程中。

舊版：

npm run watch-poll

僅在 Laravel Mix / Webpack 專案或 File Watch 無法正常運作時使用。