vue 如何配置统一的后台接口地址

可以在项目根目录下新建一个 `config` 目录，然后在该目录下新建一个 `index.js` 文件，将所有的接口地址配置在该文件中。

示例代码：

const baseApiUrl = 'http://localhost:8080/api'

export default {
  login: `${baseApiUrl}/login`,
  getUserInfo: `${baseApiUrl}/userInfo`,
  // 其他接口地址...
}

然后在项目中需要使用接口的地方，可以在 `main.js` 中引入该配置文件，再在需要使用接口的组件中直接使用即可。

示例代码：

// main.js
import apiConfig from './config'

Vue.prototype.$apiConfig = apiConfig

// 组件中使用
this.$http.get(this.$apiConfig.getUserInfo)

相关问题

vue3 访问后台接口实现

在Vue3中访问后台接口可以使用Axios库。Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境中。Axios可以实现在浏览器中发送GET、POST、PUT、DELETE等HTTP请求，并且可以处理返回的响应数据。

首先，需要在Vue3项目中安装Axios依赖：

npm install axios

接着，在Vue3项目中创建一个api.js文件，用于封装Axios库的请求：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 对请求错误做些什么
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 20000) {
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  })

export default service

在上述代码中，我们创建了一个Axios实例，并且定义了请求拦截器和响应拦截器。

接着，在Vue3组件中使用Axios请求数据：

import axios from '@/api'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      axios.get('/api/list').then(response => {
        this.list = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在上述代码中，我们使用Axios发送了一个GET请求，请求的URL为`/api/list`，并且在请求成功后将返回的数据赋值给了组件的`list`属性。

以上就是在Vue3中访问后台接口的实现方法。

vue3封装后台接口的方法

Vue 3 推荐使用 `axios` 库进行后台接口的封装。以下是一个简单的封装示例：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000/api', // 后台接口的基础 URL
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  // 封装获取数据的方法
  getData () {
    return apiClient.get('/data')
  },
  // 封装发送数据的方法
  sendData (data) {
    return apiClient.post('/data', data)
  },
  // 封装更新数据的方法
  updateData (id, data) {
    return apiClient.put(`/data/${id}`, data)
  },
  // 封装删除数据的方法
  deleteData (id) {
    return apiClient.delete(`/data/${id}`)
  }
}

在组件中使用封装好的接口方法：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <button @click="sendData">发送数据</button>
    <button @click="updateData">更新数据</button>
    <button @click="deleteData">删除数据</button>
  </div>
</template>

<script>
import api from '@/api'

export default {
  methods: {
    async getData () {
      const response = await api.getData()
      console.log(response.data)
    },
    async sendData () {
      const data = { name: 'test', age: 18 }
      const response = await api.sendData(data)
      console.log(response.data)
    },
    async updateData () {
      const id = 1
      const data = { name: 'update', age: 20 }
      const response = await api.updateData(id, data)
      console.log(response.data)
    },
    async deleteData () {
      const id = 1
      const response = await api.deleteData(id)
      console.log(response.data)
    }
  }
}
</script>

在这个示例中，我们封装了四个方法：`getData`、`sendData`、`updateData` 和 `deleteData`，并且在组件中使用了这些方法。你可以根据实际情况来添加其他的方法。