轻松掌握Vue高级技巧：在Vue-cli中配置代理 - 以GitHub用户查询为例

2023-11-22 11:45:42

今天我们来用Vue做第三个小demo，一个Github用户搜索的小案例，之前我们用React也做过，这次用Vue做一次，使用axios来发起网络请求。

1. 搭建Vue项目

首先，我们创建一个新的Vue项目。可以使用Vue CLI快速创建项目，也可以手动创建一个项目。

vue create demo3

2. 配置代理

在Vue-cli项目中，我们可以通过.env.development或.env.production文件来配置代理。代理配置允许您将请求转发到不同的服务器或API。

# .env.development

VUE_APP_BASE_API=http://localhost:3000

在上面的示例中，我们设置了VUE_APP_BASE_API环境变量，并将它指向我们的API服务器。

3. 安装axios

接下来，我们需要安装axios库来发起HTTP请求。

npm install axios

4. 使用axios发起请求

在Vue组件中，我们可以使用axios库轻松发起HTTP请求。

import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      userData: {}
    }
  },
  methods: {
    searchUser() {
      axios.get(`${this.$env.VUE_APP_BASE_API}/users/${this.username}`)
        .then(response => {
          this.userData = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}