Laravel 9中运行npm run watch报错的解决求助

问题原因 #

Laravel 9 已弃用原有的Mix构建工具，改用Vite作为默认前端构建工具。Vite的工作模式和Mix不同，你手动添加的vite build --watch并非适配Laravel场景的正确用法，且Laravel Vite本身提供了替代传统watch功能的官方命令。

解决方案 #

方案一：使用官方推荐的开发命令（首选） #

Laravel Vite的npm run dev命令已集成文件监听+热重载功能，完全可以替代原来的npm run watch：

1. 打开package.json，删除手动添加的watch脚本，恢复为默认配置：

   {
       "private": true,
       "scripts": {
           "dev": "vite",
           "build": "vite build"
       },
       "devDependencies": {
           "axios": "^1.1.2",
           "laravel-vite-plugin": "^0.7.2",
           "lodash": "^4.17.19",
           "postcss": "^8.1.14",
           "vite": "^4.0.0"
       }
   }
   

2. 执行命令启动开发服务：

   npm run dev
   

   该命令会自动监听前端资源文件变化，实时编译并刷新浏览器。

方案二：适配生产环境的监听构建（可选） #

如果需要在生产环境下监听文件变化并自动重新构建，可按以下步骤调整：

1. 升级laravel-vite-plugin到适配Vite 4.x的版本（当前0.7.2版本与Vite 4.x存在兼容问题）：

   npm install laravel-vite-plugin@^0.8.0 --save-dev
   

2. 修改watch脚本命令：

   "watch": "vite build --mode development --watch"
   

3. 重新执行npm run watch。

额外排查步骤 #

• 执行npm install重新安装所有依赖，避免依赖缺失或版本冲突
• 检查vite.config.js配置，确保正确指定前端资源入口并开启自动刷新：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: true,
          }),
      ],
  });
  

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