vue 启动项目时报错 ValidationError: webpack Dev Server Invalid Options

最新推荐文章于 2025-08-26 21:43:38 发布

原创最新推荐文章于 2025-08-26 21:43:38 发布 · 3.7w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue启动报错

vue框架专栏收录该内容

14 篇文章

订阅专栏

博客介绍了Vue启动项目时出现‘ValidationError: webpack Dev Server Invalid Options’报错的解决办法。原因是配置文件中用于解决跨域问题的‘代理’对象值为空，解决方法是找到config.js等文件，将devServer里的proxy注释掉。

vue 启动项目 yarn serve 或者 npm run dev 时
如果vue 启动项目时出现报错信息：ValidationError: webpack Dev Server Invalid Options 在这里插入图片描述
问题原因：
在配置文件里用来解决跨域问题的 “代理” 对象值是空的

解决的方法：
找到 config.js 文件修改一下里面的内容（webpack.config.js 或者 vue.config.js）
找到 devServer 将里面的proxy注释掉就可以了
在这里插入图片描述

16 条评论

visual_lulu 2021.05.12
修改了别人配置的vue.config.js然后启动不起来的，谢谢提供思路，还原了就启动起来了

靓仔牛奶O 2021.01.13
[code=javascript] const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { // index: path.resolve(__dirname, '../dist/index.html'), // bundleAnalyzerReport: process.env.npm_config_report, // 很关键要配置 transpileDependencies: ['element-ui'], // 项目部署基础路径, 假设部署在域名的根部 eg: https://www.my-app.com/, publicPath: './' // 如果应用部署在一个子路径下, 那么需要指定子路径, eg: https://www.foobar.com/my-app/, publicPath: '/my-app/' // publicPath: './', // 将构建好的文件输出到哪里 outputDir: 'dist', // 放置静态资源的地方 (js/css/img/font) assetsDir: './src/assets', // 默认起始页文件 indexPath: 'index.html', // 调整内部的 webpack 配置。 // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('components', resolve('src/components')) .set('api', resolve('src/axios')) .set('utils', resolve('src/utils')) .s [/code]
- 雾里桃花回复靓仔牛奶O 2021.01.21
  应该就是某一个配置出问题了，找到关键的配置注释掉就可以，楼下的问题和你是一样的，其中某一个配置出了问题，导致整个项目无法启动
- 雾里桃花回复靓仔牛奶O 2021.01.21
  恭喜恭喜[face]monkey2:039.png[/face]
- 靓仔牛奶O回复雾里桃花 2021.01.21
  全注释后不报错了哈哈哈哈哈[face]monkey2:015.png[/face]
- 雾里桃花回复靓仔牛奶O 2021.01.13
  代码里有无效的配置，具体是哪个不太清楚，一段段的注释测试一下，看看是哪一个配置报错，然后把引起报错的代码注释掉就可以了
- 靓仔牛奶O回复靓仔牛奶O 2021.01.13
  我这样配置后报这个错啊啊啊啊：ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties options should NOT have additional properties options should NOT have additional properties

读书(立志-修身) 2020.06.12
解决了我的问题

weixin_45282713 2020.05.21
注释掉也是报错啊
- 雾里桃花回复weixin_45282713 2020.05.21
  [reply]weixin_45282713[/reply]如果报错内容和我的一样的话，注释以后重新启动一下项目就不会报错了

山河已无恙 2019.12.20
注释掉怎么转发Ya
- 雾里桃花回复猫吃全麦饼干 2020.07.24
  [reply]AgamaDog[/reply]兄弟，是你devServe里productionSourceMap的问题，把他注释掉就可以了
- 猫吃全麦饼干回复雾里桃花 2020.07.24
  [reply]csdn_chengpeng[/reply][code=javascript] module.exports={ publicPath:'/', //配置根目录，上传访问目的的时候用到，比如www.sina.com/china/,这个/china/就是要额外配置的，写成publicPath:'/china/' outputDir:'dist', //构建输出目录 //assetsDir:"assets", //静态资源目录（js,css,image） lintOnSave:false,//是否开启eslint检测,false不开启，有效值：true || false productionSourceMap:false,//生成环境下面开启sourceMap支持断点调试 devServer:{ open:true, //是否启动打开浏览器 host:"localhost",//主机，0.0.0.0支持局域网地址，可以用真机测试 port:8080, //端口 https:false,//是否启动https productionSourceMap:false,//配置生产环境下面的source-map //配置跨域代理 proxy:{ "/api":{ target:"http://vueshop.glbuys.com/api", changeOrigin:true, pathRewrite:{ '^/api':"" } } } } }; [/code]
- 猫吃全麦饼干回复雾里桃花 2020.07.24
  [reply]csdn_chengpeng[/reply]我明明不是空值，为什么也报错呢
- 山河已无恙回复雾里桃花 2020.03.27
  [reply]csdn_chengpeng[/reply]嗯，明白啦，谢谢博主
- 雾里桃花回复山河已无恙 2020.03.27
  [reply]sanhewuyang[/reply]里面有值的话是不会报错的，只有空值才会报错