如何在Vuejs中修复“ Webpack开发服务器无效选项”

时间:2019-05-17 15:25:39

标签: vuejs2 webpack-dev-server

我正在使用@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工作!

6 个答案:

答案 0 :(得分:13)

是的,这个问题在最近几个小时内在@vue/cli中突然出现。我在一个新项目中也遇到了同样的事情。要解决此问题,请尝试以下操作:

  1. 如果尚未在项目的根目录中创建文件vue.config.js

  2. 将此添加到该文件:

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

然后重新运行您的项目。昨晚发生了某事,其中预设的clientLogLevel值变得不正确。

以下是讨论此问题的主题:GitHub

答案 1 :(得分:5)

我不知道为什么会收到该错误,但是您将如何配置该选项:

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

2。 在其中输入以下内容:

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

3。 重新运行npm run serve

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

答案 2 :(得分:0)

使用@vue/cli-service时,文档有些混乱,因为它实际上包装了webpack。

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

最好的办法是用类似的方法更新您的vue.config.js

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

答案 3 :(得分:0)

好像webpack-dev-server@3.4.0破坏了某些东西。我将其还原为3.3.1,并且似乎可以正常工作。

答案 4 :(得分:0)

我编辑了

  

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

第139行说:

  

clientLogLevel:'警告'

代替

  

clientLogLevel:“无”

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

答案 5 :(得分:0)

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