详解vue+axios给开发环境和生产环境配置不同的接口地址

为了给开发环境和生产环境配置不同的接口地址，我们需要依赖于webpack。我们可以通过环境变量在编译时设置接口地址，从而在不同的环境中使用不同的接口地址。

1. 修改webpack的配置文件

在项目的根目录中找到名为vue.config.js的文件，如果不存在则通过vue-cli工具生成（vue create projectName）。在该文件中添加如下代码：

module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap(definitions => {
      definitions[0]['process.env'].API_URL = JSON.stringify(process.env.API_URL)
      return definitions
    })
  }
}

2. 配置环境变量

在我们的项目中我们需要指定API_URL这个环境变量，通过这个环境变量我们就可以在编译时动态修改我们的接口地址。我们可以在package.json文件中添加如下代码：

{
  "scripts": {
    "dev": "API_URL=http://dev.api.example.com npm run serve",
    "build:test": "API_URL=http://test.api.example.com npm run build",
    "build:prod": "API_URL=http://prod.api.example.com npm run build",
    ...
  }
}

在以上三个脚本中，我们设置了API_URL为开发环境、测试环境以及生产环境的不同API地址。

3. 使用环境变量

在代码中使用环境变量很简单，只需要通过process.env.API_URL即可获取在不同环境下指定的API地址。例如：

import axios from 'axios';

const apiUrl = process.env.API_URL;

axios.get(apiUrl + '/examplePath')
  .then(response => {})
  .catch(error => {})

以上是一个简单的axios请求示例，我们使用了.env文件中的API_URL环境变量来获取正确的接口地址。

示例

示例一

我们假设在开发环境中，我们的接口地址是http://localhost:3000/api，在生产环境中我们的接口地址是https://api.example.com/api。

在.env.development文件中设置API_URL环境变量：

API_URL=http://localhost:3000/api

在.env.production文件中设置API_URL环境变量：

API_URL=https://api.example.com/api

在vue.config.js中添加define插件：

config.plugin('define').tap(definitions => {
  definitions[0]['process.env'].API_URL = JSON.stringify(process.env.API_URL)
  return definitions
})

在代码中使用环境变量:

import axios from 'axios';

const apiUrl = process.env.API_URL;

axios.get(apiUrl + '/examplePath')
  .then(response => {})
  .catch(error => {})

示例二

我们假设在开发环境中，我们的接口地址是http://localhost:3000/api，在测试环境中我们的接口地址是https://test.api.example.com/api，在生产环境中我们的接口地址是https://api.example.com/api。

在package.json中设置环境变量：

{
  "scripts": {
    "dev": "API_URL=http://localhost:3000/api npm run serve",
    "build:test": "API_URL=https://test.api.example.com/api npm run build",
    "build:prod": "API_URL=https://api.example.com/api npm run build",
    ...
  }
}

在代码中使用环境变量：

import axios from 'axios';

const apiUrl = process.env.API_URL;

axios.get(apiUrl + '/examplePath')
  .then(response => {})
  .catch(error => {})

以上就是在Vue中使用axios给开发环境和生产环境配置不同的接口地址的完整攻略，通过这种方式我们可以让项目更加灵活，同时也方便我们更好地管理和维护我们的前端项目。