您现在的位置是：首页 >技术教程 >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 地址，并且不需要手动更改代码。