vue3+ts项目中有多个接口地址，并且已经在.env文件中配置完毕，api.ts和request.ts文件应该怎么写，请详细说明

在 Vue3 + TypeScript 项目中，您可以使用环境变量来存储多个接口地址，例如：

在 `.env` 文件中，您可以添加以下内容：

VUE_APP_API_URL_1=https://api.example.com
VUE_APP_API_URL_2=https://api.another-example.com

然后，在您的 `api.ts` 文件中，您可以定义一个接口常量对象，包含所有的接口地址：

interface ApiUrls {
  [key: string]: string;
}

const apiUrls: ApiUrls = {
  apiUrl1: process.env.VUE_APP_API_URL_1 as string,
  apiUrl2: process.env.VUE_APP_API_URL_2 as string,
};

export default apiUrls;

接下来，在您的 `request.ts` 文件中，您可以定义一个请求类，以及相关的请求方法，例如：

import axios, { AxiosInstance } from 'axios';
import apiUrls from './api';

class Request {
  private http: AxiosInstance;

  constructor() {
    this.http = axios.create({
      timeout: 10000,
    });
  }

  get<T>(urlKey: keyof ApiUrls, params?: any): Promise<T> {
    const url = apiUrls[urlKey];
    return this.http.get<T>(url, { params });
  }

  post<T>(urlKey: keyof ApiUrls, data?: any): Promise<T> {
    const url = apiUrls[urlKey];
    return this.http.post<T>(url, data);
  }

  // other methods...
}

export default new Request();

在上面的代码中，我们首先导入了之前定义的 `apiUrls` 对象，然后在 `get()` 和 `post()` 方法中，可以通过 `urlKey` 参数来获取对应的接口地址，从而发送请求。

现在，您就可以在您的组件中使用 `Request` 类来发送请求了，例如：

import { defineComponent } from 'vue';
import Request from './request';

export default defineComponent({
  async mounted() {
    const data = await Request.get<{ message: string }>('apiUrl1');
    console.log(data.message);
  },
});

在上面的代码中，我们首先导入了 `Request` 类，并在 `mounted()` 生命周期中，使用 `Request.get()` 方法来获取 `apiUrl1` 对应接口的数据，并在控制台中输出了返回的消息。

希望这能够帮助您完成您的项目！