详解基于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 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
微信小程序排坑指南详解
May 23 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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中GET变量的使用
2006/10/09 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php链表用法实例分析
2015/07/09 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
python多线程之事件Event的使用详解
2018/04/27 Python
浅析python继承与多重继承
2018/09/13 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
师范大学应届生求职信
2013/11/21 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
银行安全保卫工作总结
2015/08/10 职场文书