这段时间在折腾有vue做开发，之前也用过，但是大部分都是用一些简单的数据绑定。踏了很多坑，总结了一下，希望对刚刚开始折腾的小伙伴有帮助。
常见问题一：用vue-cli搭好环境以后，本地域名和测试环境的域名不一致，怎么跨域访问后台接口？
在config目录下找到index.js，在dev下添加如下:
rush:js;">
proxyTable: {
'/api':{//指定以/api开头的接口都走代理
target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
changeOrigin:true,//支持跨域
pathRewrite:{
'/api':''
}
}
},
以上的配置其实是dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。
请求/api/getGame实际发出去的请求是 https://yhhdtest.moguyun.com/getGame
按照上面的配置好以后，本地环境可以成功的跨域和后台交互了。但是每个接口前面都要加一个原本不需要的/api前缀，这个其实和我们生产是不符合的。这个时候需要我们做一些配置，通过编译来区分。
在index.js下分别找到dev和prod（有的项目可能直接抽出来，单独成文件了）
dev.env.js
rush:js;">
module.exports = merge(prodEnv,{
NODE_ENV: '"development"',API_HOST:'"/api/"'
})
prod.env.js
rush:js;">
module.exports = {
NODE_ENV: '"production"',API_HOST:'""'
}
关键点在于API_HOST，这个时候我们的请求可以这么写
rush:plain;">
process.env.API_HOST+'/getGame'
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/31744.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
