运行npm run sev报错vue-cli-service serve --verbose

Question

使用npm run serve的时候，报错vue-cli-service的问题：报错如下：

ERROR ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

at validateOptions (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\node_modules\schema-utils\src\validateOptions.js:32:11)
at new Server (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\node_modules\webpack-dev-server\lib\Server.js:57:5)
at serve (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\lib\commands\serve.js:140:20)
at processTicksAndRejections (internal/process/task_queues.js:95:5)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! renren-ui@5.2.0 serve: vue-cli-service serve --verbose
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the renren-ui@5.2.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:\software\new-software\node14.17.3\node_cache_logs\2024-06-12T10_14_54_596Z-debug.log

Process finished with exit code 1
报错截图如下：

使用npm run serve的时候，报错vue-cli-service的问题：报错如下：

ERROR ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

at validateOptions (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\node_modules\schema-utils\src\validateOptions.js:32:11)
at new Server (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\node_modules\webpack-dev-server\lib\Server.js:57:5)
at serve (C:\CODE\DesignNew\algo-sim\node_modules\@vue\cli-service\lib\commands\serve.js:140:20)
at processTicksAndRejections (internal/process/task_queues.js:95:5)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! renren-ui@5.2.0 serve: vue-cli-service serve --verbose
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the renren-ui@5.2.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:\software\new-software\node14.17.3\node_cache_logs\2024-06-12T10_14_54_596Z-debug.log

Process finished with exit code 1
报错截图如下：

package文件中有webpack依赖以及node—modules中有vue-cli-service的依赖，

Answer 1

引自免费微信小程序：皆我百晓生

从你提供的错误信息来看，问题出在webpack-dev-server的配置上，它正在尝试使用一些不被新版本所接受的选项。这通常发生在你使用的@vue/cli-service和webpack-dev-server版本不兼容的情况下。

为了解决这个问题，你可以尝试以下步骤：

1. 检查并更新依赖项： 确保你的项目中的所有相关依赖项都是最新的，尤其是@vue/cli-service和webpack-dev-server。你可以通过运行以下命令来更新它们：

   npm update @vue/cli-service webpack-dev-server
   

   如果你的项目中没有直接列出webpack-dev-server作为依赖，那么只需要更新@vue/cli-service即可。

2. 清理缓存并重新安装依赖： 清理npm缓存，然后重新安装项目依赖，这可以确保所有依赖项都是最新状态且正确安装。

   npm cache clean --force
   npm install
   

3. 检查vue.config.js文件： 如果你的项目中有vue.config.js文件，检查其中是否有与webpack-dev-server相关的配置。确保这些配置选项是当前版本的webpack-dev-server所支持的。例如，如果你看到类似hot: true这样的配置，可能需要调整为hotOnly: true，因为hot选项在某些版本中已被弃用。

4. 查看官方文档： 检查@vue/cli和webpack-dev-server的官方文档，确保你的配置符合最新版本的要求。文档通常会列出哪些配置选项已经被弃用，以及如何进行正确的迁移。

5. 创建新的Vue项目作为对比： 有时候，创建一个新的Vue项目并尝试复制你的问题，可以帮助你识别问题所在。这可以通过以下命令完成：

   vue create test-project
   cd test-project
   npm run serve
   

   然后，逐步将你的代码和配置添加到这个新项目中，直到问题重现，这样可以更容易地定位问题来源。

6. 寻求社区帮助： 如果以上步骤都无法解决问题，考虑在Vue.js的GitHub仓库、Stack Overflow或Vue官方论坛上提问，提供详细的错误信息和你的项目结构，以便获得更具体的帮助。

请按照上述步骤逐一排查，希望能帮助你解决遇到的问题。如果在执行过程中有任何疑问或遇到其他问题，欢迎继续询问。