详解基于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'
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现跑马灯样式文字横向滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
在Vue项目中,你可以使用路由（vue-router）来实现页面跳转并传递参数,这篇文章主要为大家整理了一些常用的方法,感兴趣的小伙伴可以学习一下2023-11-11
最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下2022-05-05
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下2021-12-12
Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用，需要的的朋友参考下吧2017-07-07
详解如何将 Vue-cli 改造成支持多页面的 history 模式
本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了Vue.js路由vue-router使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
最新评论