Vue CLI ValidationError：webpack Dev Server无效选项

今天早上我遇到了一个问题，即使用Vue CLI创建一个新的Vue项目。关于这一点的奇怪之处在于我昨天刚刚创建了一个新项目并且运行正常。我做了一些挖矿，这似乎影响了很多用户，所以我想我会把一个快速的帖子放在一起。

创建和运行新的VueJS项目

我从早上开始使用Vue CLI创建一个新项目。创建项目后，我更改了该目录并输入了命令 npm run serve 哪个叫 vue-cli-service服务。尝试启动几秒钟后，我在终端中收到以下错误。

  INFO启动开发服务器...错误ValidationError：webpack Dev Server无效选项options.clientLogLevel应该是 {串} 并等于其中一个允许值   （ '信息'， '警告'， '错误'， “调试”， '跟踪'， '无声' ）   （https://webpack.js.org/configuration/dev-server/#devserverclientloglevel）  ValidationError：webpack Dev Server无效选项options.clientLogLevel应该是 {串} 并等于其中一个允许值   （ '信息'， '警告'， '错误'， “调试”， '跟踪'， '无声' ）   （https://webpack.js.org/configuration/dev-server/#devserverclientloglevel）      在validateOptions （/Users/vega/dev/vue/hello-vue-cli/node_modules/schema-utils/src/validateOptions.js:32:11）     在新的服务器上 （/Users/vega/dev/vue/hello-vue-cli/node_modules/webpack-dev-server/lib/Server.js:71:5）     在服务 （/Users/vega/dev/vue/hello-vue-cli/node_modules/@vue/cli-service/lib/commands/serve.js:138:20）     在process._tickCallback （内部/过程/ next_tick.js：68：7）     在Function.Module.runMain （内部/模块/ CJS / loader.js：745：11）     在启动时 （内部/引导/ node.js中：283：19）     在bootstrapNodeJSCore （内部/引导/ node.js中：743：3） 错误的ERR代码ELIFECYCLE npm ERR错误1 npm ERR hello-vue-cli@0.1.0服务： `vue-cli-service服务` 错误的ERR退出状态1 npm ERR错误的ERR在hello-vue-cli@0.1.0服务脚本失败。错误的ERR这可能不是npm的问题。上面可能有额外的日志记录输出。错误的ERR一个 完成 可以找到此运行的日志 在：npm ERR /Users/vega/.npm/_logs/2019-05-17T15_05_54_552Z-debug.log 

我通过运行命令检查了Vue CLI的版本 vue -V 我正在运行最新的3.7.0。我想也许我做错了所以通过运行删除项目 rm -Rf hello-vue-cli 并再次尝试只遇到同样的错误。

我接下来想知道这是否影响了我的所有项目或新项目。我进入了一个现有的项目并运行 npm run serve 它开始很好。这让我头疼，因为今天早上我没有更新NodeJS，NPM或Vue，所以到底发生了什么。

Github上的Vue CLI问题

在这一点上，我很困惑，所以我的下一步是前往Github，看看是否有其他人看到类似的问题。果然，前两个帖子与我的体验非常相似。

向dland512大喊大叫，提供一些关于发生了什么的清晰度。看来问题出在生成的webpack配置上 node_modules/@vue/cli-service/lib/commands/serve.js 其中包括：

常量 服务器 = 新 WebpackDevServer（编译器， 宾语。分配（{       clientLogLevel： '没有'， 

如果你回顾原始错误，它说：

ValidationError：webpack Dev Server无效选项options.clientLogLevel应该是 {串} 并等于其中一个允许值   （ '信息'， '警告'， '错误'， “调试”， '跟踪'， '无声' ） 

仍然不确定是什么导致了这一点，但它可能是 VUE-CLI-服务 本身。解决方法是在项目的根目录中创建一个新文件 vue.config.js 包含以下内容：

模。出口 = {     devServer： {         clientLogLevel： '信息'     } }; 

添加此配置后，我能够运行项目，没有任何错误。如果您想了解有关Vue CLI全局配置的更多信息，可以在此处查看文档。

结论

我猜这篇文章被索引的时候它将不再是一个问题，但我认为写起来很重要。这是15年前让我一天甚至一周完全脱轨的错误之一。凭借经验和耐心，我学会了如何处理最终会出现的这类问题。我希望本文能够为您解决这个问题，或者只是让您深入了解我处理令人沮丧的问题的思维过程。一如既往 …

快乐的编码

担

本文首次发布在我的博客https://www.danvega.dev/blog上。如果您发现此文章有趣，请考虑订阅我的简报或在Twitter上关注我。