vue添加axios,并且指定baseurl的方法

下面为你详细讲解“Vue添加Axios，并且指定BaseURL的方法”：

1. 安装 Axios

我们需要先安装 Axios 库，可以通过 npm 安装，命令如下：

npm install axios --save

2. 引入 Axios

安装完成后，我们需要先引入 Axios 库，建议在 main.js 中引入，然后在 Vue.prototype 上挂载 Axios 方法，代码如下：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

这样我们就在全局挂载了 Axios 方法，后续我们就可以在任意组件中使用 $axios 方法来发送请求了。

3. 指定 BaseURL

接下来，我们需要指定 Axios 的请求地址，在请求地址前面添加一段公共的 URL，这个公共的 URL 通常称为 BaseURL。为了方便，我们可以把 BaseURL 放在一个单独的配置文件中，方便维护。在示例中，我们把配置文件放在了 src/config 文件夹下。

代码如下：

// src/config/config.js
export default {
  // 后端 API 接口地址
  apiBaseUrl: 'http://example.com/api'
}

然后我们就可以通过 import 的方式引入配置文件，并在 Axios 的全局配置中进行配置。示例代码如下：

// src/main.js
import Vue from 'vue'
import axios from 'axios'
import config from '@/config/config'

axios.defaults.baseURL = config.apiBaseUrl
Vue.prototype.$axios = axios

这样我们就可以通过 Vue.prototype.$axios.get 方法发送请求并且自动添加了 BaseURL。

示例代码：

this.$axios.get('/user/123')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

4. 针对不同环境设置不同的 BaseURL

对于一个项目来说，往往存在不同的环境，例如开发环境、测试环境、生产环境等，每个环境的 BaseURL 都不同，这个时候我们需要针对不同的环境设置不同的 BaseURL。

示例代码如下：

// src/config/config.js
let apiBaseUrl
if (process.env.NODE_ENV === 'production') {
  apiBaseUrl = 'http://example.com/api'
} else if (process.env.NODE_ENV === 'testing') {
  apiBaseUrl = 'http://testing.example.com/api'
} else {
  apiBaseUrl = 'http://localhost:8080/api'
}

export default {
  apiBaseUrl: apiBaseUrl
}

在上面的配置文件中，我们根据不同的环境设置了不同的 BaseURL，然后在 main.js 中进行引用即可。

示例代码：

// src/main.js
import Vue from 'vue'
import axios from 'axios'
import config from '@/config/config'

axios.defaults.baseURL = config.apiBaseUrl
Vue.prototype.$axios = axios

这样就可以根据不同的环境设置不同的 BaseURL，便于项目的开发和部署。