Java前端报错npm ERR! demo@0.1.0 serve: `vue-cli-service serve`

Question

前端报错
之前运行好好的，不知道怎么了

Starting development server...
 ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'devServer'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'devServer'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
    at validate (D:\develop\demo1\demo\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:158:11)
    at new Server (D:\develop\demo1\demo\node_modules\webpack-dev-server\lib\Server.js:270:5)
    at serve (D:\develop\demo1\demo\node_modules\@vue\cli-service\lib\commands\serve.js:194:20)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo@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:

Answer 1

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

看起来你在尝试启动一个基于Vue CLI的项目，但是遇到了错误。这个错误是由于vue.config.js文件中的配置选项不符合Webpack Dev Server的API规范。具体来说，它提示devServer是一个未知属性。

要解决这个问题，请按照以下步骤操作：

1. 打开你的项目根目录下的vue.config.js文件。
2. 检查是否有任何关于devServer的配置。在Vue CLI中，通常不需要显式地配置devServer，因为它已经默认包含了必要的设置。
3. 如果你确实有自定义的devServer配置，确保它的格式正确。例如，如果你想要更改默认的监听端口，正确的做法应该是这样：

module.exports = {
  // ...其他配置
  devServer: {
    port: 8080, // 替换为你的目标端口号
  },
  // ...其他配置
};

1. 如果没有特殊的配置需求，可以直接删除或注释掉devServer部分，因为Vue CLI会使用默认设置。

2. 保存并关闭vue.config.js文件。

3. 清除缓存，运行npm cache clean --force。

4. 再次尝试启动开发服务器，执行npm run serve。

如果你的项目仍然出现问题，可能是因为全局的Vue CLI版本与本地项目版本不匹配。你可以尝试更新全局的Vue CLI到最新版本，使用命令npm install -g @vue/cli。

如果以上步骤都不能解决问题，请检查项目的其他配置文件，比如.eslintrc.js或.babelrc，确保它们没有包含对devServer的意外配置。如果还有问题，可以考虑重新安装依赖项，执行npm ci或yarn，然后再次启动项目。