详解基于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 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python 求数组局部最大值的实例
2019/11/26 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
java字符串格式化输出实例讲解
2021/01/06 Python
学期自我鉴定范文
2013/10/01 职场文书
农业开发项目建议书
2014/05/16 职场文书
干部鉴定材料
2014/05/18 职场文书
环境整治工作方案
2014/05/18 职场文书
听证通知书
2015/04/24 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
python3.9之你应该知道的新特性详解
2021/04/29 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android