vue如何根据不同的环境使用不同的接口地址

Vue可以通过配置不同的环境变量来实现在不同的环境下使用不同的接口地址。以下是实现的步骤：

1. 创建环境变量配置文件

在Vue项目根目录下创建.env文件，以及.env.development、.env.production等与环境对应的文件。其中，.env是默认的环境配置文件，.env.production文件适用于生产环境，.env.development文件适用于开发环境。文件格式与.env文件相同，只是其中的变量值可以不同。例如，.env.development文件内容如下：

# .env.development
VUE_APP_API_URL=http://localhost:8080/api/

2. 配置webpack

在Vue项目的根目录中找到vue.config.js文件，在其中配置process.env对象的值。例如：

// vue.config.js
module.exports = {
  // ...
  devServer: {
    // ...
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_URL,
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

该配置具体完成了什么操作呢?

如果你的实际接口地址是http://example.com/api，那么在开发环境下，实际使用的接口地址就是http://localhost:8080/api，而生产环境下实际使用的接口地址就是http://example.com/api。

3. 在代码中使用环境变量

在需要使用接口地址的地方，用process.env.VUE_APP_API_URL替换掉实际的接口地址，在开发环境中即使用.env.development文件中定义的VUE_APP_API_URL，在生产环境中即使用.env.production文件中定义的VUE_APP_API_URL。

例如，在使用axios发送请求的代码中，可以这样写：

import axios from 'axios'

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

// ...

这样，无论是在开发环境还是生产环境中，都可以正确地调用接口地址。

除了以上提到的方法，还有其他的实现方式，例如：使用env-cmd、cross-env等第三方库、使用环境变量注入等。但以上步骤可以作为一个简单易懂的入门实现方式。