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

最新推荐文章于 2025-06-18 09:30:00 发布

原创

最新推荐文章于 2025-06-18 09:30:00 发布 · 2.9k 阅读

收录于

当前文章被以下社区和专栏收录：

文章介绍了在Vue.js应用中，如何利用window.location.origin获取当前页面的源信息，包括协议、主机和端口，以及如何通过环境变量VUE_APP_BASE_API灵活配置后端API的基础URL，以便在不同环境中无缝切换。在项目中，可以使用process.env.VUE_APP_BASE_API与Axios结合，进行HTTP请求，避免硬编码URL。

首先直接上结果:

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 中的环境变

标签