Laravel 5.8执行npm run dev报ENOENT错误找不到admin-lte/bootstrap目录
问题根因
报错的核心原因是你安装的admin-lte@3.1.0版本目录结构发生了变更,3.x版本的AdminLTE包内已经不存在bootstrap目录,该目录是2.x版本的旧结构,你在webpack.mix.js中配置的复制路径指向了不存在的资源,因此触发ENOENT报错。
同时还存在两个潜在的版本兼容问题:
- AdminLTE3.x基于Bootstrap4构建,但你安装的
bootstrap-sass是Bootstrap3的Sass版本,二者不兼容 - Laravel5.8默认适配的laravel-mix版本为4.x,你当前安装的mix6.x版本也存在兼容风险
解决方案
方案1:保留AdminLTE3.x版本(推荐)
步骤1:修改webpack.mix.js配置
删除不存在的AdminLTE bootstrap目录复制规则,修改后的AdminLTE相关配置如下:
// Admin LTE Assets .copyDirectory('node_modules/admin-lte/dist', 'public/admin-lte') .copyDirectory('node_modules/admin-lte/plugins', 'public/plugins')
步骤2:调整Bootstrap依赖适配AdminLTE3.x
执行以下命令替换旧的bootstrap依赖:
npm uninstall bootstrap-sass npm install bootstrap@4 popper.js --save-dev
如果你的resources/assets/sass/app.scss中引入了bootstrap样式,将原有引入语句替换为适配Bootstrap4的写法:
// 替换掉原来的 @import "~bootstrap-sass/assets/stylesheets/bootstrap"; @import "~bootstrap/scss/bootstrap";
步骤3:降级laravel-mix到适配Laravel5.8的4.x版本
执行以下命令替换laravel-mix版本:
npm uninstall laravel-mix npm install laravel-mix@4 --save-dev
修改package.json中的scripts配置为mix4.x对应的命令:
"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },
步骤4:重新安装依赖并测试
执行以下命令清理并重建依赖:
rm -rf node_modules package-lock.json npm install npm run dev
方案2:降级AdminLTE到2.x版本(无需修改现有业务代码)
如果你不想适配Bootstrap4,可以直接降级AdminLTE到支持旧目录结构的2.4版本:
- 执行命令替换AdminLTE版本:
npm uninstall admin-lte npm install admin-lte@2.4 --save
- 清理重装依赖:
rm -rf node_modules package-lock.json npm install npm run dev
该方案无需修改webpack.mix.js中的原有复制规则,也不用调整Bootstrap相关配置。
内容的提问来源于stack exchange,提问作者daktau
相关产品推荐
相关产品推荐

