vue设置动态请求地址的例子
更新时间：2019年11月01日 11:49:54 作者：watts_j
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
需求：在开发和生产环境下，请求不同的地址（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设置动态请求地址的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用HBuilderX把vue项目打包成apk，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于nginx+vite项目打包以及部署的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下2018-02-02
本文主要介绍了Element如何实现loading的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue项目拍照或上传图片并实现转化为base64格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文通过实例代码给大家介绍了vue实现底部菜单功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
Vue中使用crypto-js AES对称加密算法实现加密解密
在数字加密算法中，通过可划分为对称加密和非对称加密，本文主要介绍了Vue中使用crypto-js AES对称加密算法实现加密解密，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论