vue3+ts代理的使用
作者：你的美，让我痴迷
本文主要介绍了vue3+ts代理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
简单封装request.ts
import axios from "axios";
// 1.创建axios对象
const service=axios.create();
// 2.请求拦截器
service.interceptors.request.use(config=>{
return config;
},error=>{
Promise.reject(error);
})
// 3.响应拦截器
service.interceptors.response.use(response=>{
// 判断code码
return response.data;
},error=>{
return Promise.reject(error)
})
export default service;
api请求实例：
import request from "@/utils/request";
export const getSliders=()=>{
return request({
url:"/api/slider/getSliders"
})
}
设置代理 vite-config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
// 配置路径别名
alias: {
"@":path.resolve(__dirname,'./src')
}
},
server:{
proxy:{
"/api":"http://127.0.0.1:9999/"
}
}
})
在页面中使用：
<template>
<div>
<el-carousel indicator-position="outside" height="400px">
<el-carousel-item v-for="item in imgUrls" :key="item">
<img :src="item.imageUrl" alt="轮播图" class="img" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { getSliders } from "@/api/slider";
let imgUrls = ref([]);
onBeforeMount(() => {
getSliders().then((res: any) => {
console.log(res, "请求结果");
imgUrls.value = res.data;
});
});
</script>
<style>
.img {
width: 100%;
}
</style>
效果图：
到此这篇关于vue3+ts 代理的使用的文章就介绍到这了,更多相关vue3+ts 代理的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！