详解基于Vue-cli搭建的项目如何和后台交互


Posted in Javascript onJune 29, 2018

这段时间在折腾有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'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
详解vue组件基础
May 04 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 #Javascript
Vue表单demo v-model双向绑定问题
Jun 29 #Javascript
vue底部加载更多的实例代码
Jun 29 #Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 #Javascript
vue项目打包后打开页面空白解决办法
Jun 29 #Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
You might like
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
js调用css属性写法
2013/09/21 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
使用python实现接口的方法
2017/07/07 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
详解python polyscope库的安装和例程
2020/11/13 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
人事主管岗位职责
2014/01/30 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2015年度企业工作总结
2015/05/21 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python实现智慧校园自动评教全新版
2021/06/18 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
Golang并发工具Singleflight
2022/05/06 Golang