vue3 接口数据写法

api文件

       

// 引入axios二次封装
import service from "../../request/request";
// 引入TS类型
import { IuserLogin } from "../../vite-env";

// 用户登录接口
export const Logins = async (params: IuserLogin) => {
  return await service.post('/user/login', params)
};

// 随机验证码接口
export const Logout = async () => {
  return await service({
    url: "/user/captcha",
    method: "GET",
  });
};

Home文件

 <!-- 首页 -->
    <div v-for="(item,index) in list" :key="index">
      {{ item.name }}
    </div>


<script setup lang="ts">

import {ref,reactive} from 'vue';
import {getNameList} from '../api/LoginInterface/index'
const list = ref<any>('')

getNameList().then((res: any)=>{
  console.log(res);
  
})

</script>

vite.config.ts文件

跨域
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),],
  server: {
    open: true,
    host: "localhost",
    port: 8080, // 端口
    proxy: {
      "/api": {
        // 请求接口中要替换的标识
        target: "http://127.0.0.1:7001", // 代理地址
        changeOrigin: true, // 是否允许跨域
        secure: true,
        rewrite: (path) => path.replace(/^\/api/, ""), // api标志替换为''
      },
    },
  },
});