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

最新推荐文章于 2025-05-17 00:38:44 发布

飞翔的老鹅

最新推荐文章于 2025-05-17 00:38:44 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： 1024程序员节 vue.js vue

本文链接：https://blog.youkuaiyun.com/m0_53114105/article/details/134017045

本文介绍了如何在Vue项目中处理业务场景，当客户电脑既有内网也有外网环境时，通过在.env.production配置文件中设置不同API地址，并在请求拦截器中进行判断，实现根据不同网络环境调用对应后端接口的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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)
  }
)