vue设置动态请求地址的例子


Posted in Javascript onNovember 01, 2019

需求:在开发和生产环境下,请求不同的地址(http or ws),使其置入线上环境,无论是什么域名都不用手动更改请求地址

思路:使前端请求接口地址简单化

上代码:在vuex中设置总的接口地址,然后在生产和开发环境下配置不同的地址

export const configUrl = {
 url: process.env.API_HOST,
 ws: process.env.API_WS
}

然后在config文件夹中,设置dev.env.js和prod.env.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST: '"/urlProxy/"', // 开发环境下的代理地址
 API_WS: '"ws://192.168.0.57:8081/api/websocket"'
})

prod.env.js:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'"/api/"', // 生产环境下的接口,如:www.baidu.com/api/
 API_WS: '"/api/websocket"' // wss://www.baidu.com/api/websocket
}

wss的地址配置不同,需要做一个单独处理:

let url = new URL(this.url, window.location.href)
url.protocol = url.protocol.replace('https', 'wss')

替换一下就ok了

以上这篇vue设置动态请求地址的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
div层的移动及性能优化
Nov 16 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js格式化时间的方法
Dec 18 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解JavaScript 的变量
Mar 08 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 #Javascript
js实现旋转的星空效果
Nov 01 #Javascript
浅谈小程序globalData的那些事儿
Nov 01 #Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
js实现漂亮的星空背景
Nov 01 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
php 上传功能实例代码
2010/04/13 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
社团成立邀请函
2014/01/08 职场文书
浪费资源的建议书
2014/03/12 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python