Vue项目切换内外网请求地址(内外网调用不同后端接口)

业务场景: 客户电脑一部分只有内网，另一部分则只有外网，此时同一项目打包上线后需调用不同后端接口，可在请求拦截器中做以下处理

1.  在.env.production 生产环境配置文件中添加两条属性

# 线上环境 内网
# VUE_APP_BASE_API = '内网地址'

# 线上环境 外网
# VUE_APP_BASE_API_WWW = '外网地址' 

 2.  在请求拦截器中判断是内网还是外网

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 60000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (window.location.host.indexOf('192.168') > -1 || window.location.host.indexOf('localhost') > -1) {
      //判断是内网地址的话，就请求内网后端接口地址
      config.baseURL = process.env.VUE_APP_BASE_API;
    } else {
      //判断是外网地址的话，就请求外网后端接口地址
      config.baseURL = process.env.VUE_APP_BASE_API_WWW;
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)