脚本宝典收集整理的这篇文章主要介绍了基于Vue-cli搭建的项目如何和后台交互,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这段时间在折腾有vue做开发,之前也用过,但是大部分都是用一些简单的数据绑定。踏了很多坑,总结了一下,希望对刚刚开始折腾的小伙伴有帮助。
在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/...
按照上面的配置好以后,本地环境可以成功的跨域和后台交互了。但是每个接口前面都要加一个原本不需要的/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:'""'
}
process.env.API_HOST+'/getGame'
以上是脚本宝典为你收集整理的基于Vue-cli搭建的项目如何和后台交互全部内容,希望文章能够帮你解决基于Vue-cli搭建的项目如何和后台交互所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。