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:
运行后一切正常,如下: