vite vue3 ts 项目封装axios

在Vite Vue3 TypeScript项目中封装axios，你可以按照以下步骤进行操作：

1. 首先，在项目根目录下新建一个`.env.development`文件，并在其中添加以下内容：

VITE_API_BASEURL = https://shop.fed.lagou.com/api/admin/

这样可以在开发模式下加载环境变量。

2. 在`src/utils/request.ts`文件中，引入axios和AxiosRequestConfig，并创建一个axios实例：

import axios, { AxiosRequestConfig } from 'axios'

const request = axios.create({
  baseURL: process.env.VITE_API_BASEURL
})

这里使用了之前在`.env.development`文件中定义的`VITE_API_BASEURL`作为baseURL。

3. 添加请求拦截器和响应拦截器，可以在请求发送前和响应返回后进行一些统一处理：

request.interceptors.request.use(function (config) {
  // 统一设置用户身份token
  return config
}, function (error) {
  // 处理请求错误
  return Promise.reject(error)
})

request.interceptors.response.use(function (response) {
  // 统一处理接口响应错误
  return response
}, function (error) {
  // 处理响应错误
  return Promise.reject(error)
})

4. 最后，导出一个封装好的请求函数，用于发送请求并处理返回的数据：

export default <T = any>(config: AxiosRequestConfig) => {
  return request(config).then(res => {
    return res.data.data as T
  })
}

这样，你就可以在项目中调用这个封装好的axios请求函数来发送请求了。

需要注意的是，安装axios可以使用npm、yarn或者pnpm，具体可以根据你的项目配置选择合适的方式进行安装。