富贵资源网 Design By www.hznty.com
这段时间在折腾有vue做开发,之前也用过,但是大部分都是用一些简单的数据绑定。踏了很多坑,总结了一下,希望对刚刚开始折腾的小伙伴有帮助。
常见问题一:用vue-cli搭好环境以后,本地域名和测试环境的域名不一致,怎么跨域访问后台接口?
在config目录下找到index.js,在dev下添加如下:
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
module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_HOST:'"/api/"' })
prod.env.js
module.exports = { NODE_ENV: '"production"', API_HOST:'""' }
关键点在于API_HOST,这个时候我们的请求可以这么写
process.env.API_HOST+'/getGame'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...