1.跨域问题处理

在vite.config.ts中配置以下内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

/************************************* 路径配置 start ********************************/
import { resolve } from 'path'

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}
/************************************* 路径配置 end ********************************/
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  },           // ****************** 路径配置新增
  server: {//配置跨域
   // open: true,//启动项目自动弹出浏览器
   port: 3000,//启动端口
   proxy: {
     '/api': {
       target: 'http://10.1.0.0:82/',   //实际请求地址
       changeOrigin: true,
       ws:true,
       hotOnly: true, // 是否开启热更新
       rewrite: (path) => path.replace(/^\/api/, '')
     },
   }
 }
})

2.封装request

一、先在 src 下创建一个 utils文件夹，并添加一个 request.ts 文件

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

class HttpRequest {
    private readonly baseUrl: string;
    constructor() {
        this.baseUrl = '/api'
    }
    getInsideConfig() {
        const config = {
            baseURL: this.baseUrl,// 所有的请求地址前缀部分(没有后端请求不用写)  
            timeout: 80000, // 请求超时时间(毫秒)
            withCredentials: true,// 异步请求携带cookie
            // headers: {
            // 设置后端需要的传参类型
            // 'Content-Type': 'application/json',
            // 'token': x-auth-token',//一开始就要token
            // 'X-Requested-With': 'XMLHttpRequest',
            // },
        }
        return config
    }

    // 请求拦截
    interceptors(instance: AxiosInstance, url: string | number | undefined) {
        instance.interceptors.request.use(config => {
            // 添加全局的loading..
            // 请求头携带token
            return config
        }, (error: any) => {
            return Promise.reject(error)
        })
        //响应拦截
        instance.interceptors.response.use(res => {
            //返回数据
            const { data } = res
            console.log('返回数据处理', res)
            return data
        }, (error: any) => {
            console.log('error==>', error)
            return Promise.reject(error)
        })
    }

    request(options: AxiosRequestConfig) {
        const instance = axios.create()
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance, options.url)
        return instance(options)
    }
}

const http = new HttpRequest()
export default http

3.封装接口

在api的文件夹中，新建一个api的ts文件。

import http from '../utils/request'
export function GetCode() {
  return http.request({
    url: `/saassys/api/User/GetCode`,
    method: 'get'
  })
}

跨域参考文章:https://blog.csdn.net/weixin_52658189/article/details/128308566
接口封装参考:https://www.jianshu.com/p/837721abfd36