文章参考
- vue-cli 3.0版本,配置代理Proxy,不同环境不同target(生产环境,uat环境和本地环境的配置)
- https://cli.vuejs.org/zh/config/#devserver-proxy
如何配置proxy
- 在项目的跟目录下创建
vue.config.js
文件 - 添加如下配置
module.exports = {
outputDir: 'dist', //build输出目录
assetsDir: 'assets', //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost", //表示启动的时候使用的域名,默认可以不写,则是使用localhost和本机IP
port: '8081', // 设置端口号
https: false, //是否使用https协议
hotOnly: false, //是否开启热更新
proxy: {
'/api': {
target: 'http://yd.msword.top', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 是否跨域,虚拟的站点需要更管origin
pathRewrite: {
// '^/api5'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
'^/api5': '/api',
//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '',
}
},
'/foo': {
target: 'http://yd.abc.top'
}
},
}
}