vue/若依系统如何在前端获取到当前文件源协议+主机+端口+生产/开发环境的api
而这个 URL 经常需要在不同的开发、测试和部署环境中进行切换,为了实现方便的配置管理,可以将这个 URL 保存在环境变量中。process.env.VUE_APP_BASE_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 地址,并且不需要手动更改代码。
更多推荐
所有评论(0)