vue/若依系统如何在前端获取到当前文件源协议+主机+端口+生产/开发环境的api

首先直接上结果:

window.location.origin:获取vue/若依系统,前端获取到当前文件源协议+主机+端口

process.env.VUE_APP_BASE_API获取自己在配置文件里设置的端口.生产/开发的端口是不同的,日常中又不能写定值,不写的话正式服务器是没办法读到正确的文件的,当然我这里是在获取网络路径的情况下,

一般要获取完整url 是需要拼接的

接下来详细说一下这两个:

window.location.origin

window.location.origin 是一个 JavaScript 对象,表示当前文档的源 (协议、主机和端口)。它是由 window.location.protocol (协议), window.location.hostname (主机) 和 window.location.port (端口) 三个属性拼接得到的。

例如,如果当前页面的 URL 是 https://www.example.com:8080/foo/bar,那么 window.location.origin 的值将为 https://www.example.com:8080

在客户端 JavaScript 中,window.location 对象提供了一些有关当前 URL 的信息,如协议、主机、端口、路径以及查询参数等。除此之外,还可以通过 window.location 对象来进行跳转到其他页面或刷新当前页面等操作。

process.env.VUE_APP_BASE_API

process.env.VUE_APP_BASE_API 是一个 Vue.js 中的环境变量。它是在项目启动时设置的,用于指定当前应用程序所连接的后端服务器的基本 URL。

具体来说,当 Vue.js 项目中使用 Axios 或者其他 HTTP 客户端库来向后端发送 HTTP 请求时,通常需要指定后端服务器的 URL。而这个 URL 经常需要在不同的开发、测试和部署环境中进行切换,为了实现方便的配置管理,可以将这个 URL 保存在环境变量中。

在 Vue.js 项目中,可以使用 .env 文件来定义环境变量。通过在 .env 文件中定义 VUE_APP_BASE_API 变量,您可以在项目中的任何地方使用 process.env.VUE_APP_BASE_API 来获取后端服务器的基本 URL,而无需手动修改代码。

当然至于需不需要拼接window.location.origin看自己

VUE_APP_BASE_API如何定义:

比如:

VUE_APP_BASE_API=http://localhost:8080/api

在应用程序中,可以使用 process.env.VUE_APP_BASE_API 来访问这个变量,比如:

axios.get(`${process.env.VUE_APP_BASE_API}/users`)

这样在不同的环境中,应用程序就可以使用不同的 API 地址,并且不需要手动更改代码。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值