vue项目中如何调用多个不同的ip接口

首先，我们需要在 Vue 项目中设置不同的 ip 接口。这可以通过在项目根目录下的 config/index.js 文件中修改地址来实现。根据你所需要连接的不同 ip 接口，当前文件需要进行下列修改：

1. 添加 dev 和 prod 中的接口

dev 和 prod 分别对应 Vue 项目的开发和生产环境。我们需要在文件中添加对应的接口地址。对于 config/index.js 文件中的 dev 对象，增加以下代码：

dev: {
  env: require('./dev.env'),
  port: 8085,
  proxyTable: {
    '/api1': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/api1': '/'
      }
    },
    '/api2': {
      target: 'http://127.0.0.1:9090',
      changeOrigin: true,
      pathRewrite: {
        '^/api2': '/'
      }
    }
  },
  cssSourceMap: false
}

针对接口一，我们设置了 http://127.0.0.1:8080 作为代理地址，将 /api1 替换为根路径 /，这样在项目中调用 /api1 接口时，即会被代理到 http://127.0.0.1:8080。

类似地，对于接口二，我们设置代理地址为 http://127.0.0.1:9090，并将访问路径规定为 /api2。

1. 修改生产环境下的接口

对于 config/index.js 文件中的 prod 对象，我们也需要相应地更新代理，使其在生产环境下同样可以访问到接口。

prod: {
  env: require('./prod.env'),
  port: 9000,
  // 修改这里
  proxyTable: {
    '/api1': {
      target: 'http://api.example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api1': '/'
      }
    },
    '/api2': {
      target: 'http://api.example.com:9090',
      changeOrigin: true,
      pathRewrite: {
        '^/api2': '/'
      }
    }
  },
  // 静态资源的根目录
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  cssSourceMap: false,
  // 配置需要压缩的文件
  productionGzip: false,
  productionGzipExtensions: ['js', 'css']
}

这里我们将代理地址修改为了实际的接口地址，这意味着在生产环境下，访问 /api1 和 /api2 时，实际上会被代理到 http://api.example.com:9090。

为了正确设置代理，我们需要在项目的 main.js 文件中加载 devServer 配置：

// 引入 devServer 配置
var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var app = require('./app')
app.listen(3000)

经过上述步骤，我们已经成功设置了 two different ips 的 Vue 项目的接口地址，下面我们来看具体示例：

1. Vue 项目中同时使用多个 ip 的接口

<template>
  <div>
    <!-- 访问接口一 -->
    <button @click="fetchApi1">Fetch Api1</button>
    <div>{{ api1Data }}</div>

    <!-- 访问接口二 -->
    <button @click="fetchApi2">Fetch Api2</button>
    <div>{{ api2Data }}</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        api1Data: null,
        api2Data: null
      }
    },
    methods: {
      fetchApi1 () {
        axios.get('/api1').then(response => {
          this.api1Data = response.data
        })
      },
      fetchApi2 () {
        axios.get('/api2').then(response => {
          this.api2Data = response.data
        })
      }
    }
  }
</script>

1. 在 Vue 项目中创建两个实例，分别访问不同接口。

<template>
  <div>
    <!-- 实例一 -->
    <div>{{ api1Data }}</div>

    <!-- 实例二 -->
    <div>{{ api2Data }}</div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        api1Data: null,
        api2Data: null
      }
    },

    created () {
      // 创建第一个实例
      axios.create({
        baseURL: 'http://127.0.0.1:8080'
      }).get('api1').then(response => {
        this.api1Data = response.data
      })

      // 创建第二个实例
      axios.create({
        baseURL: 'http://127.0.0.1:9090'
      }).get('api2').then(response => {
        this.api2Data = response.data
      })
    }
  }
</script>

在这种情况下，我们使用了 axios.create() 方法创建了两个 axios 实例，每个实例在不同的 ip 地址下访问对应的接口，从而成功调用了不同的 ip 接口。

以上就是 Vue 项目中如何调用多个不同的 ip 接口的完整攻略，希望对你有所帮助。