vue中axios.defaults.baseURL的几种配置方式

284 阅读1分钟

1.普通方式:

import axios from 'axios'

axios.defaults.baseURL = 'http://192.168.10.187:8092'

2.根据域名动态设置:

import axios from 'axios'

let protol = window.location.protocol //协议
let host = window.location.hostname //主机
let reg = /^localhost+/
if(reg.test(host)){
  //若本地项目调试使用
  axios.defaults.baseURL = 'http://192.168.10.187:8092'
  console.log('axios.defaults.baseURL1=',axios.defaults.baseURL)
}else{
  //动态请求地址 ,协议, 主机
  axios.defaults.baseURL = protol + '//' + host + ':8092'
  console.log('axios.defaults.baseURL2=',axios.defaults.baseURL)
}

3.根据不同的打包方式设置不同的baseURL

import axios from "axios";

if (process.env.NODE_ENV === "development"){
    axios.defaults.baseURL = "http://192.168.10.187:8092"
}else if (process.env.NODE_ENV === "production"){
    axios.defaults.baseURL = "http://xxx-yyy.bbb.com:8092"
}else if (process.env.NODE_ENV === "test") {
    axios.defaults.baseURL = "http://192.168.10.187:8092"
}else {
    axios.defaults.baseURL = "http://192.168.10.187:8092"
}

题外:

window.location 是一个表示当前页面 URL 的对象。它具有以下属性:

  • window.location.href:返回完整的 URL 地址。
  • window.location.protocol:返回当前页面的协议(例如,http:// 或 https://)。
  • window.location.host:返回当前页面的主机名和端口号。
  • window.location.hostname:返回当前页面的主机名。
  • window.location.port:返回当前页面的端口号。
  • window.location.pathname:返回当前页面的路径部分。
  • window.location.search:返回当前页面 URL 中的查询参数部分(以问号开头)。
  • window.location.hash:返回当前页面 URL 中的哈希部分(以#号开头)。

这些属性可以用于获取或修改当前页面的 URL 信息。例如,你可以使用 window.location.href 获取完整的 URL,并使用 window.location.assign(url) 来跳转到指定的 URL。请注意,修改 window.location 的属性会导致页面重定向或刷新。