logo标签列表

如何在Vuejs中修复“webpack Dev Server Invalid Options”错误

javascriptvue.jswebpackvuejs2webpack-dev-server
24

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

但是当我在项目目录中运行npm run serve时，我遇到了以下错误：


 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\_logs\2019-05-17T19_40_14_984Z-debug.log

我尝试了npm cache clean -f，重新安装VueJS，重新创建项目，但都没有起作用 :(

我希望我的npm run serve可以工作！

这个错误看起来很明显，你的 options.clientLogLevel 值似乎不正确。 - Jérôme
4
我该如何修复这个错误？在我的项目中，我没有任何 webpack.config.js 文件，那么我该如何更改 webpack 配置中的值呢？Webpack 的相关内容是由 VueJS 管理的。 - Arti Singh
7个回答
16

是的，这个问题在最近几个小时内突然出现在@vue/cli中。我在一个新项目中也遇到了同样的问题。要解决它，请尝试以下方法：

  1. 如果您还没有vue.config.js文件，请在项目根目录中创建该文件。

  2. 将以下内容添加到该文件中：

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

然后重新运行您的项目。昨晚发生了一些事情，预设的clientLogLevel值变得不正确。

这是一个讨论此问题的主题：GitHub。

今天在升级现有项目中的Vue CLI服务并创建一个hello word示例后，我遇到了同样的错误。这个更改确实使webpack配置再次有效。看起来是默认配置中的错误。 - Christophe Geers
5

我不知道你为什么会出现那个错误，但是以下是配置该选项的方法：

1. 在根目录下创建 vue.config.js

2. 将以下内容输入其中：

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

3. 重新运行 npm run serve

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

1

删除 node_modules 文件夹并重新安装 npm

rm -rf node_modules
0
似乎 webpack-dev-server@3.4.0 出了问题，我将其还原到 3.3.1，看起来可以正常工作了。
0

我编辑了

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

使第139行变成:

clientLogLevel: 'warn'

而不是

clientLogLevel: 'none'

(编辑 - 尽管我正在使用hello-world应用程序)

0
0

使用@vue/cli-service时，文档有点混乱，因为它本质上是对webpack的封装。

[这里是解决方案的链接](https://cli.vuejs.org/guide/webpack.html#simple-configuration)

最好的做法是更新你的vue.config.js文件，例如：

configureWebpack: {
    devServer: {
      clientLogLevel: `silent`,
    },
  },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接