vue3基于ts完美开发环境和线上环境的axios 封装

首先，可以使用`Vue CLI`创建一个基于`TypeScript`的`Vue3`项目，这样可以获得完善的类型检查和智能提示。

接着，在`src`目录下创建一个`api`文件夹，用于存放所有的接口请求相关的代码。在该文件夹下创建一个`http.ts`文件，用于封装`axios`：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

// 创建一个 axios 实例
const http: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
http.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前做些什么
    return config
  },
  (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
http.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做些什么
    return response.data
  },
  (error: any) => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default http

在`main.ts`中引入该文件：

import http from '@/api/http'

createApp(App).use(router).use(store).provide('http', http).mount('#app')

这样，在任何需要使用`axios`的地方，都可以通过依赖注入的方式获取到`http`实例，并使用它来发起请求：

import { inject } from 'vue'

export default {
  setup() {
    const http = inject('http')

    const fetchData = async () => {
      const res = await http.get('/api/user')
      console.log(res)
    }

    return {
      fetchData
    }
  }
}

这样，我们就完成了一个基于`TypeScript`的完美开发环境下的`axios`封装。当然，这只是一个简单的示例，实际项目中可能还需要进行更多的封装和处理。