欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 培训 > vue2 proxy 代理配置报错 ValidationError: webpack Dev Server Invalid Options

vue2 proxy 代理配置报错 ValidationError: webpack Dev Server Invalid Options

2024/11/30 18:46:12 来源:https://blog.csdn.net/hefeng_aspnet/article/details/141357231  浏览:    关键词:vue2 proxy 代理配置报错 ValidationError: webpack Dev Server Invalid Options

vue/cli3(本文实际使用的是vue/cli4)代理配置如下: 

vue/cli4使用vue/cli3的代理配置会出现异常,本文解决办法为解决方法二处理,运行正常。 

vue 启动项目 yarn serve 或者 npm run dev 或者 npm run serve 时,编译异常:

ERROR  ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

如下图截图:

解决方法一

问题原因: 

        在配置文件里用来解决跨域问题的 “代理” 对象值是空的 

解决问题: 

        主要由于(webpack.config.js 或者 vue.config.js)配置文件错误导致的,具体定位到proxy配置代理不能为空,导致运行项目报错,需要对proxy配置进行完全注释掉,如下图:

下图这种由于没有完全注释,会报错: 

解决方法二

问题原因: 

由于vue/cli版本差异问题造成的。 

解决问题: 

出现上述错误是因为给vue了无效的配置。原因就是我使用的是vue/cli4但使用了proxyTable进行配置。注意cli2下用的是proxyTable加上一系列配置,cli3及以上用的是proxy。

vue-V查看vue/cli的版本

使用vue.config.js解决代理问题。首先在根目录下创建 vue.config.js(注意检查不要创建在src文件夹下)。然后通过配置代理如下:

// vue.config.js
module.exports = {
    runtimeCompiler: true,
    publicPath: '/', //设置打包路径
    devServer: {
        port: 8081,
        host: 'localhost',
        open: true,
        https: false,
        proxy: {
          '/api/*': {
              target: 'http://127.0.0.1:8082',
              changeOrigin: true,
              pathRewrite: {
                  '^/api': ''
              }
          }
        }
    }
}

配置后运行npm run serve:

运行后一切正常,如下:

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com