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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
js实现导航跟随效果
Nov 17 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
自动跳转中英文页面
2006/10/09 PHP
PHP简介
2006/10/09 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
基本DOM节点操作
2017/01/17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python删除列表中重复记录的方法
2015/04/28 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python中无限循环需要什么条件
2020/05/27 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
家长会主持词开场白
2014/03/18 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
廉洁自律证明
2015/06/24 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS