如何在 Vuejs 中修复 "webpack Dev Server Invalid Options"

Question

我正在使用 @vue/cli v3.7.0 并且我通过 vue create myapp 使用 Babel + Router + node-sass 创建了一个项目并且我的项目安装成功

但是当我运行 npm 运行服务时（在项目目录中）我得到以下错误：


 INFO  Starting development server...
 ERROR  ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

    at validateOptions (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\node_modules\schema-utils\src\validateOptions.js:32:11)
    at new Server (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\lib\Server.js:71:5)
    at serve (C:\Users\Dell\Desktop\myapp\node_modules\@vue\cli-service\lib\commands\serve.js:138:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the myapp@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dell\AppData\Roaming\npm-cache\_logs19-05-17T19_40_14_984Z-debug.log

我尝试了 npm cache clean -f、重新安装 VueJS、重建项目，但没有任何效果:(

我期待我的 npm run serve 工作！

Answer 1

我不知道您为什么会收到该错误，但您可以按照以下方式配置该选项：

1。在您的根目录中创建 vue.config.js

2。输入以下内容：

module.exports = {
  devServer: {
    clientLogLevel: 'debug'
  }
}

3。重新运行 npm run serve

您可以阅读有关配置开发服务器的更多信息here。

Answer 2

是的，这个问题是在 @vue/cli 的最后几个小时内突然出现的。我在一个新项目中有同样的事情。要修复它，试试这个：

如果您还没有该文件，请在项目的根目录中创建一个名为 vue.config.js 的文件。
将此添加到该文件：

module.exports = {
  devServer: {
    clientLogLevel: 'info'
  }
};

然后 re-run 你的项目。昨晚发生了一些事情，预设的 clientLogLevel 值变得不正确。

这里有一个讨论这个问题的帖子：GitHub。

Answer 3

文档在使用 @vue/cli-service 时有点混乱，因为它本质上包装了 webpack。

[这里有一个link的解决方案]( https://cli.vuejs.org/guide/webpack.html#simple-configuration)

最好的办法是用

之类的东西更新你的vue.config.js

configureWebpack: {
    devServer: {
      clientLogLevel: `silent`,
    },
  },

Answer 4

好像webpack-dev-server@3.4.0 坏了什么。我将其恢复为 3.3.1，它似乎可以正常工作。

Answer 5

我编辑了

node_modules/@vue/cli-service/lib/commands/serve.js

所以第 139 行说：

clientLogLevel: 'warn'

而不是

clientLogLevel: 'none'

（编辑 - 虽然我正在使用 hello-world 应用程序）

Answer 6

webpack-dev-server 已作为修补程序的 v3.4.1 发布。请更新。 https://github.com/webpack/webpack-dev-server/releases/tag/v3.4.1

Answer 7

删除 node_modules 文件夹并 npm install agani

rm -rf node_modules

如何在 Vuejs 中修复 "webpack Dev Server Invalid Options"

How to fix "webpack Dev Server Invalid Options" in Vuejs

javascript

webpack

vue.js

webpack-dev-server

vuejs2