详解基于Vue-cli搭建的项目如何和后台交互
更新时间：2018年06月29日 14:14:41 作者：xieyanmei
这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这段时间在折腾有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'
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vuex 实现getter值赋值给vue组件里的data示例
今天小编就为大家分享一篇vuex 实现getter值赋值给vue组件里的data示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了Vue2.0生命周期，思考与理解“el被新创建的vm.$el替换”这句话，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了Vue props中Object和Array设置默认值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要给大家介绍了关于vue组件化中slot的基本使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了vue页面渲染数组中数据文案后添加逗号最后不加逗号示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的，这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下2022-11-11
本文主要介绍了vue3使用reactive赋值后页面不改变，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最近小编遇到这样的问题当vue单页面按F5强刷，数据就恢复初始了，这怎么办呢？下面小编给大家带来了Vue单页面应用保证F5强刷不清空数据的解决方案，感兴趣的朋友一起看看吧2018-01-01
这篇文章主要介绍了vue中radio根据动态值绑定checked无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在 Vue 的开发中，我们经常会用到外部组件库，这篇文章主要介绍了vue、angular深度作用选择器,需要的朋友可以参考下2019-09-09
最新评论