Laravel项目中npm run watch执行失败与/vendor/perfect-scrollbar.css文件无法定位的原因及解决方法

咱们来逐个解决你遇到的两个Laravel关联问题：

问题1：浏览器提示 Unable to locate Mix file: /vendor/perfect-scrollbar.css #

原因 #

这个错误本质是Laravel Mix没有编译出对应的CSS文件，常见触发场景：

• 项目里还没安装perfect-scrollbar这个依赖包
• webpack.mix.js中没有配置引入该文件的编译规则
• 从未执行过Mix编译命令，导致目标文件根本没生成

解决步骤 #

1. 安装依赖包：在项目根目录的终端执行

npm install perfect-scrollbar --save-dev

2. 配置Mix编译规则：打开项目根目录的webpack.mix.js，添加以下配置（根据你的项目结构调整路径）：

// 直接编译第三方CSS到指定目录
mix.css('node_modules/perfect-scrollbar/css/perfect-scrollbar.css', 'public/vendor');

// 或者如果你习惯在主样式文件中引入，也可以在你的app.scss里添加：
// @import "~perfect-scrollbar/css/perfect-scrollbar.css";

3. 执行编译生成文件：

npm run dev

执行完成后，public/vendor目录下就会生成对应的CSS文件，浏览器的错误就会消失。

问题2：npm run watch执行失败 #

原因 #

从错误日志看，mix watch命令执行返回了退出码2，常见原因包括：

• Node.js、npm与Laravel Mix版本不兼容（你当前用的node v14.15.4 + npm v6.14.10，可能和项目依赖的Mix版本不匹配）
• node_modules依赖包损坏或安装不完整
• webpack.mix.js存在语法错误或配置路径错误

解决步骤 #

1. 清理并重装依赖：这是解决多数npm依赖问题的通用方案

# 删除现有依赖包和锁文件（Windows下如果用CMD，把rm换成del）
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

2. 检查Laravel Mix版本兼容性：
   Laravel版本和Mix版本有对应关系，比如Laravel 8+适配Mix 6，Laravel 7适配Mix 5。如果版本不匹配，升级或降级Mix：

# 升级到最新版Mix（适合Laravel 8及以上）
npm install laravel-mix@latest --save-dev

3. 先测试基础编译命令：
   先执行npm run dev，如果这个命令能成功，说明watch的问题大概率是缓存或监听机制的小问题，再重新执行npm run watch即可。如果dev也失败，重点检查webpack.mix.js的配置是否有语法错误（比如括号不闭合、路径写错）。
4. 升级Node.js版本：
   你当前的Node.js v14.x虽然还在维护，但换成LTS版本（比如v16.x）兼容性会更好，升级后再重装依赖重试。

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