vue3+vite+axios 配置连接后端调用接口的实现方法

下面是详细的讲解“vue3+vite+axios 配置连接后端调用接口的实现方法”的完整攻略。

1. 环境搭建

首先需要安装Node.js和Vue-CLI脚手架工具，可以通过以下命令安装：

# 安装Node.js
https://nodejs.org/

# 安装Vue CLI
npm install -g @vue/cli

2. 创建项目

可以使用Vue CLI快速创建项目：

vue create my-app

这里使用了“my-app”作为项目名称，可以根据需要自行修改。

3. 安装和配置axios、vite

在项目目录下，安装axios和vite：

npm install axios vant -S
npm install vite -D

axios是用于发送HTTP请求的库，vant是一个移动端UI框架，这里为了示例方便一起安装了，实际使用中可以根据需要安装。

配置vite.config.js文件（需要在项目根目录中创建）：

import { defineConfig } from 'vite'

export default defineConfig({
    server: {
        // 配置代理
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, '')
            }
        }
    }
})

这里配置了一个代理，将所有以“/api”开头的请求，代理到后端的http://localhost:3000地址。其中changeOrigin设置为true，表示跨域请求，rewrite表示去掉请求地址中“/api”前缀，这样发送请求时只需要写相对地址。

4. 发送HTTP请求

在Vue组件中，可以使用axios发送HTTP请求，如下所示：

<template>
  <div>
    <button @click="getUser">获取用户信息</button>
    <p v-if="user">{{ user }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  methods: {
    async getUser() {
      try {
        const response = await axios.get('/api/user')
        console.log(response.data)
        this.user = response.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

这里定义了一个按钮，点击按钮时会触发getUser方法，发送HTTP GET请求到“/api/user”地址，并将返回结果保存在user变量中，最后在页面中显示出来。

另外一个示例：

<template>
  <div>
    <button @click="getUser">获取用户信息</button>
    <p v-if="user">{{ user }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  methods: {
    async getUser() {
      try {
        const response = await axios.post('/api/user', { id: 1 })
        console.log(response.data)
        this.user = response.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

这里发送了一个HTTP POST请求到“/api/user”地址，并且携带了一个{id: 1}的数据。后端如果实现了对应的接口，就会根据这个数据返回对应的结果。

以上就是“vue3+vite+axios 配置连接后端调用接口的实现方法”的完整攻略，希望对你有所帮助。