Laravel+Breeze环境下npm run dev卡顿无响应问题求助

问题描述 #

安装Laravel与Breeze时，npm install执行正常，但运行npm run dev时出现卡顿，无后续反应，卡顿前输出内容如下：

VITE v3.0.9  ready in 1434 ms

  ➜  Local:   http://127.0.0.1:5176/
  ➜  Network: use --host to expose

  LARAVEL v9.25.1  plugin v0.5.4

  ➜  APP_URL: http://localhost

更新情况 #

执行npm run build完成生产构建后，再次运行npm run dev仍出现卡顿，相关输出如下：

npm run build

> build     
> vite build

vite v3.0.9 building for production...
✓ 119 modules transformed.
public/build/manifest.json             0.25 KiB
public/build/assets/app.c090eeea.css   186.93 KiB / gzip: 26.55 KiB
public/build/assets/app.aac2dc08.js    170.64 KiB / gzip: 57.15 KiB

amand@Amanda MINGW64 /c/laragon/www/patinoire
$ npm run dev

> dev
> vite

Port 5173 is in use, trying another one...
Port 5174 is in use, trying another one...

  VITE v3.0.9  ready in 1043 ms

  ➜  Local:   http://127.0.0.1:5175/
  ➜  Network: use --host to expose

  LARAVEL v9.25.1  plugin v0.5.4

  ➜  APP_URL: http://localhost

解决办法 #

• 终止当前卡住的进程：按Ctrl+C停止运行中的npm run dev
• 清理依赖缓存并重新安装：
  1. 执行npm cache clean --force清空npm缓存
  2. 删除项目根目录的node_modules文件夹和package-lock.json文件
  3. 重新执行npm install
• 手动指定端口启动：运行npm run dev -- --port 5177（可替换为未被占用的端口）
• 升级相关依赖：
  • 升级Vite：npm install vite@latest --save-dev
  • 升级Laravel Vite插件：npm install laravel-vite-plugin@latest --save-dev
• 检查网络与拦截：关闭系统防火墙或代理工具，确保开发端口未被拦截
• 切换npm源：若为网络问题，执行npm config set registry https://registry.npmmirror.com/切换国内镜像源

内容的提问来源于stack exchange，提问作者Amanda