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

您可能感兴趣的文章:

Element InputNumber 计数器的实现示例
这篇文章主要介绍了Element InputNumber 计数器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
vue.js中使用echarts实现数据动态刷新功能
这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下
2019-04-04
深入了解Vue3中props的原理与使用
props指父组件往子组件中传入参数，这篇文章主要为大家介绍了vue3中props的原理与使用，文中的示例代码讲解详细，感兴趣的可以了解一下
2023-05-05
vue+elementUI如何实现顶部路由标签跳转
这篇文章主要介绍了vue+elementUI如何实现顶部路由标签跳转问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue3中安装使用vue-i18n实时切换语言且不用刷新
这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
在Vue 中实现循环渲染多个相同echarts图表
这篇文章主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中的插槽详解
这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-10-10
vue组件间传值的方法你知道几种
这篇文章主要为大家详细介绍了vue组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue el-form一行里面放置多个el-form-item的实现
本文主要介绍了vue el-form一行里面放置多个el-form-item的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue中项目页面空白但不报错产生的原因及分析
这篇文章主要介绍了vue中项目页面空白但不报错产生的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05