vue3版本+TS(typescript)+简单封装api 配置反向代理

在Vue 3中使用TypeScript并简单封装API配置反向代理，你可以使用axios作为HTTP客户端库，并结合Vue的插件系统来配置反向代理。以下是一个简单的示例：

1. 安装axios和http-proxy-middleware（如果你使用的是Vue CLI，可以通过npm或yarn安装所需依赖）：

npm install axios http-proxy-middleware

2. 创建api.ts文件，并编写封装API调用的代码：

import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: '/api/', // 设置API的基础URL
});
 
export default apiClient;

3. 在vue.config.js中配置代理，以便将API请求反向代理到后端服务器：

const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = {
  devServer: {
    proxy: {
      '/api': createProxyMiddleware({
        target: 'http://backend-server.com', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      }),
    },
  },
};

4. 在main.ts中引入API客户端并使用：

import { createApp } from 'vue';
import App from './App.vue';
import apiClient from './api';
 
const app = createApp(App);
 
app.config.globalProperties.$api = apiClient;
 
app.mount('#app');

5. 在组件中使用封装后的API：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { getCurrentInstance } from 'vue';
 
export default defineComponent({
  setup() {
    const globalProperties = getCurrentInstance()!.appContext.config.globalProperties;
    const api = globalProperties.$api;
 
    // 发起API请求
    api.get('/some-endpoint').then(response => {
      console.log(response.data);
    });
 
    // 返回响应式数据或方法
    return {
      // ...
    };
  },
});
</script>

这个示例展示了如何在Vue 3 + TypeScript项目中简单地封装API调用，并通过Vue CLI的配置使其能够通过反向代理与后端服务器通信。