首先直接上结果:

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 地址,并且不需要手动更改代码。

Logo

快速构建 Web 应用程序

更多推荐