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设置动态请求地址的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue数据双向绑定的深入探究
这篇文章主要给大家介绍了关于Vue数据双向绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录，需要的朋友参考下吧
2017-11-11
Vue 中对图片地址进行拼接的方法
今天小编就为大家分享一篇Vue 中对图片地址进行拼接的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Element input树型下拉框的实现代码
这篇文章主要介绍了Element input树型下拉框的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue的Options用法说明
这篇文章主要介绍了Vue的Options用法说明，具有很好的参考价值，希望对大家有所
2020-08-08
vue中组件传值的常见方式小结
在 Vue.js 中,组件之间的数据传递是一个常见的需求,Vue 提供了多种方法来实现这一目标,包括 props、全局事件总线、消息的订阅与发布等,下面我们就来学习一下这些方法的具体实现吧
2023-12-12
利用Vue3指令实现水印背景详解
这篇文章主要为大家介绍了利用Vue3指令实现水印背景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue项目展示pdf文件的方法实现
本文主要介绍了vue项目展示pdf文件的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue3.0响应式函数原理详细
这篇文章主要介绍了vue3.0响应式函数原理，Vue3的响应式系统可以监听动态添加的属性还可以监听属性的删除操作，以及数组的索引以及length属性的修改操作。另外Vue3的响应式系统还可以作为模块单独使用。下面更多介绍，需要的小伙伴可以才可以参考一下
2022-02-02
vue使用vue-cli快速创建工程
这篇文章主要介绍了vue使用vue-cli快速创建工程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07