如何修复 Vuejs 中的“webpack Dev Server Invalid Options”

Posted

技术标签:

【中文标题】如何修复 Vuejs 中的“webpack Dev Server Invalid Options”【英文标题】:How to fix "webpack Dev Server Invalid Options" in Vuejs 【发布时间】:2019-10-04 23:10:49 【问题描述】:

我正在使用@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 值似乎错误 如何解决这个错误?如何在 webpack 配置中更改该值,因为在我的项目中我没有任何 webpack.config.js。 Webpack 的东西由 VueJS 为我管理。 【参考方案1】:

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

    如果您还没有该文件,请在项目的根目录中创建一个名为 vue.config.js 的文件。

    将此添加到该文件:

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

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

这里有一个讨论这个问题的线程:GitHub。

【讨论】:

今天我在现有项目中升级 Vue CLI 服务并创建了一个 hello word 示例后遇到了同样的错误。此更改确实使 webpack 配置再次有效。似乎是默认配置中的错误。【参考方案2】:

我不知道您为什么会收到该错误,但这是您配置该选项的方式:

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

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

module.exports = 
  devServer: 
    clientLogLevel: 'debug'
  

3。 重新运行npm run serve

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

【讨论】:

【参考方案3】:

好像webpack-dev-server@3.4.0 弄坏了一些东西。我将其恢复为3.3.1,它似乎可以正常工作。

【讨论】:

【参考方案4】:

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

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

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

configureWebpack: 
    devServer: 
      clientLogLevel: `silent`,
    ,
  ,

【讨论】:

【参考方案5】:

我编辑了

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

所以第 139 行说:

clientLogLevel: '警告'

而不是

clientLogLevel: '无'

(编辑 - 虽然我正在使用 hello-world 应用程序)

【讨论】:

【参考方案6】:

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

【讨论】:

【参考方案7】:

删除 node_modules 文件夹和 npm install agani

rm -rf node_modules

【讨论】:

以上是关于如何修复 Vuejs 中的“webpack Dev Server Invalid Options”的主要内容,如果未能解决你的问题,请参考以下文章

Webpack:如何设置 webpack-dev-server 和 Hot Reload

如何修复错误“找不到此相关模块:* ./src/main.js in multi (webpack)-dev-server”在 npm run serve in vue3.x with typescr

如何自动修复 vuejs 中的 tslint 错误

使用 Webpack 运行的 VueJS 的“意外令牌 <”

如何修复 VueJS 中的“未定义属性或方法”错误

VueJSVueJS开发请求本地json数据的配置