在laravel-shop根目录下运行npm run dev遇到的一个错误及解决

如题，在构建开源项目【GitHub - summerblue/laravel-shop: Laravel 电商实战教程的项目代码】的过程中，执行npm run dev后，遇到一个报错：

C:\Users\daniel\Downloads\laravel-shop>npm run dev> dev
> npm run development> development
> mix× MixCompiled with some errors in 7.22sERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.- options.url should be one of these:boolean | object { filter? }-> Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).Details:* options.url should be a boolean.* options.url should be an object:object { filter? }at validate (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)at Object.getOptions (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:585:19)at Object.loader (C:\Users\daniel\Downloads\laravel-shop\node_modules\css-loader\dist\index.js:31:27)at processResult (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:758:19)    at C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:860:5at C:\Users\daniel\Downloads\laravel-shop\node_modules\loader-runner\lib\LoaderRunner.js:399:11at C:\Users\daniel\Downloads\laravel-shop\node_modules\loader-runner\lib\LoaderRunner.js:251:181 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

从内容看来，知道是css-loader版本安装的不对导致的，于是查看安装的版本：npm view css-loader version

打印出来：6.7.2

npm在安装依赖包时默认会选择最新的版本，6.7.2就是最新的版本，所以出现了不匹配，于是作版本回退后再尝试，先查看一下有哪些版本可以安装：npm view css-loader versions

C:\Users\daniel\Downloads\laravel-shop>npm view css-loader versions
['0.1.0',  '0.1.1',  '0.1.2',  '0.2.0',  '0.2.1',  '0.2.2',   '0.2.3','0.2.4',  '0.5.0',  '0.5.1',  '0.5.2',  '0.6.0',  '0.6.1',   '0.6.2','0.6.3',  '0.6.4',  '0.6.5',  '0.6.6',  '0.6.7',  '0.6.8',   '0.6.9','0.6.10', '0.6.11', '0.6.12', '0.7.0',  '0.7.1',  '0.8.0',   '0.9.0','0.9.1',  '0.10.0', '0.10.1', '0.11.0', '0.11.1', '0.11.2',  '0.12.0','0.12.1', '0.13.0', '0.13.1', '0.14.0', '0.14.1', '0.14.2',  '0.14.3','0.14.4', '0.14.5', '0.15.0', '0.15.1', '0.15.2', '0.15.3',  '0.15.4','0.15.5', '0.15.6', '0.16.0', '0.17.0', '0.18.0', '0.19.0',  '0.20.0','0.20.1', '0.20.2', '0.21.0', '0.22.0', '0.23.0', '0.23.1',  '0.24.0','0.25.0', '0.26.0', '0.26.1', '0.26.2', '0.26.4', '0.27.0',  '0.27.1','0.27.2', '0.27.3', '0.28.0', '0.28.1', '0.28.2', '0.28.3',  '0.28.4','0.28.5', '0.28.6', '0.28.7', '0.28.8', '0.28.9', '0.28.10', '0.28.11','1.0.0',  '1.0.1',  '2.0.0',  '2.0.1',  '2.0.2',  '2.1.0',   '2.1.1','3.0.0',  '3.1.0',  '3.2.0',  '3.2.1',  '3.3.0',  '3.3.1',   '3.3.2','3.4.0',  '3.4.1',  '3.4.2',  '3.5.0',  '3.5.1',  '3.5.2',   '3.5.3','3.6.0',  '4.0.0',  '4.1.0',  '4.1.1',  '4.2.0',  '4.2.1',   '4.2.2','4.3.0',  '5.0.0',  '5.0.1',  '5.0.2',  '5.1.0',  '5.1.1',   '5.1.2','5.1.3',  '5.1.4',  '5.2.0',  '5.2.1',  '5.2.2',  '5.2.3',   '5.2.4','5.2.5',  '5.2.6',  '5.2.7',  '6.0.0',  '6.1.0',  '6.2.0',   '6.3.0','6.4.0',  '6.5.0',  '6.5.1',  '6.6.0',  '6.7.0',  '6.7.1',   '6.7.2'
]

于是从高到低地试，结果发现5.0.0版本是可以的。安装命令：npm install css-loader@5.0.0 --save-dev

再执行npm run dev，打印出来:

C:\Users\daniel\Downloads\laravel-shop>npm run dev> dev
> npm run development> development
> mix* Mix █████████████████████████ done (99%) pluginsBuildCallbackPlugin* Mix █████████████████████████ done (99%) pluginsWebpackBar:done√ MixCompiled successfully in 7.98sLaravel Mix v6.0.13✔ Compiled Successfully in 7549ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                                                                                           File │ Size     │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                                                                                     /js/app.js │ 1.52 MiB │
│                                                                                                                                                                    css/app.css │ 263 KiB  │
│                                                                               fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?98f20b9ec79b2fee02a300f4b716629f │ 134 KiB  │
│                                                                               fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?991c1c761fc31f9c3252dbfb2a22fd7a │ 730 KiB  │
│                                                                               fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?330e879afe4a0abb35f235e29be3084f │ 133 KiB  │
│                                                                             fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?6e63bd22128f27b83f228bf5ef541156 │ 76.6 KiB │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?5f63cb7f47b6ea89773b43a6e687e5a5 │ 90 KiB   │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?62a07ffeac77696f17ef438f49ce6790 │ 33.5 KiB │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?f3187c7462849ed261a89dc27e7a4733 │ 141 KiB  │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?ac2367644e559de4ff330fbb7c273e70 │ 33.3 KiB │
│                                                                            fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?2c154b0f8c0d8d1661627d1ddb317b12 │ 13.3 KiB │
│                                                                             fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?ea5a41ec4a24ce93298ee053b6357e18 │ 16.4 KiB │
│                                                                                fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?6606667d9800a27eb8b5f61ccb66d510 │ 200 KiB  │
│                                                                                fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?0454203f26b33fc02e2b686b317aab3d │ 896 KiB  │
│                                                                                fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?915a0b79c22a1c1f64da9e0a90a12f02 │ 200 KiB  │
│                                                                              fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?3eb06c702e27fb110194f5a16c45cb8e │ 78.4 KiB │
│                                                                               fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?f4f93856730733912b1e06ad64c0baf7 │ 102 KiB  │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

生成的文件位于：laravel-shop根目录/public/js/app.js

在laravel-shop根目录下运行npm run dev遇到的一个错误及解决相关推荐

运行npm run dev报错 internal/modules/cjs/loader.js:883 throw err；
1. 运行npm run dev报错 internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module 'proces ...
vue报错运行npm run dev报cjs.js缺失
vue 运行 npm run dev 或者npm run serve 报core-js/modules/es6.array.find in ./node_modules/_cache-loader@2 ...
运行 npm run dev 命令，启动 webpack 进行项目打包出现问题opensslErrorStack: [ ‘error:03000086:digital envelope routine
webpack打包出现了以下问题: 经过经过查阅发现是因为node版本的问题,可以在终端执行以下命令解决这个问题: set NODE_OPTIONS=--openssl-legacy-provider ...
npm run mock | npm run dev只能启动一个
解决方法: 开两个命令窗口先运行npm run mock 再运行npm run dev 转载于:https://www.cnblogs.com/linsx/p/8548985.html
使用vue-cli初始化项目时运行‘npm run dev’报错
npm run dev 无法启动 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'D:\\Program File ...
Vue 运行 npm run dev 是报错提示 web-project-base@1.0.0 dev: `webpack-dev-server --inline --progress --open
从git 拉取了其他同事的代码,再运行前端 npm run dev 时就报这个错误了,然后就开始吧啦吧啦从网上找啊,各种方法实验,反正最后给解决了,但是花费的时间不少啊,记录下我报错的原因把,每个人的 ...
设置vue运行npm run dev时候，项目在浏览器自动打开页面的方法
在config/index.js找到dev:{}里面的autoOpenBrowser: 设置为true,重新npm run dev一次就自动弹出浏览器页面啦!
mac运行npm run dev项目报错：sh: /Users/edy/Desktop/abc/pc/node_modules/.bin/webpack-dev-server: Permission
原因:项目运行在mac没有权限: 解决:打开mac终端,输入: chmod 777 /Users/edy/Desktop/abc/pc/node_modules/.bin/webpack-dev-se ...
[乐意黎原创]npm run dev 时抛'cross-env' is not recognized as an internal or external command的解决方法
通过 Vue init webpack-simple 创建工程中, 运行 npm run dev 时抛以下错误, cross-env NODE_ENV=development webpack-dev ...

在laravel-shop根目录下运行npm run dev遇到的一个错误及解决

在laravel-shop根目录下运行npm run dev遇到的一个错误及解决相关推荐

最新文章

热门文章