vue3.2/Vite/Ts37: 真实接口替换 mock 接口

// vite.config.ts
// 获取对应环境下的变量
import { defineConfig, loadEnv } from "vite";
//...
export default defineConfig(({ command, mode }) => {
  // 获取对应环境配置文件里的对象，如 .env.development、.env.production、.env.test
  let env = loadEnv(mode, process.cwd());
  //...
  server: {
    proxy: {
         [env.VITE_APP_BASE_API]: {
            // 获取数据的服务器地址
            target: env.VITE_SERVE,
            changeOrigin: true,
            // 路径重写
            rewrite: path => path.replace(/^\/api/, '')
         }
    }
  }
  //...
});

|-- src
    |-- api
        |-- user
            |-- index.ts
            |-- type.ts

// src/api/user/index.ts
import request from "@/utils/request";
//...
import type { loginFormData, loginResponseData, userInfoResponseData } from "./type";
//...
enum API {
  LOGIN_URL = "/admin/acl/index/login",
  USERINFO_URL = "/admin/acl/index/info",
  LOGOUT_URL = "/admin/acl/index/logout",
}
// 登录接口
export const reqLogin = (data: loginFormData) =>
  request.post<any, loginResponseData>(API.LOGIN_URL, data);
// 获取用户信息接口
export const reqUserInfo = () => request.get<any, userInfoResponseData>(API.USERINFO_URL);
// 退出登录接口
// <any, any> 泛型的第二个参数表示服务器返回的数据类型
export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL);

// src/api/user/type.ts
// 定义用户接口相关 ts 类型
export interface loginFormData {
  username: string;
  password: string;
}

// 接口继承
export interface ResponseData {
    code: number,
    message: string,
    ok: booleam
}
export interface loginResponseData extends ResponseData {
    data: string,
}
export interface userInfoResponseData extends ResponseData {
    data: {
        routes: string[],
        buttons: string[],
        roles: string[],
        name: string,
        avatar: string
    },
}