vue3(vite)設置代理封裝axios api解耦功能
更新時間:2022年12月26日 15:19:50 作者:微光無限
這篇文章主要介紹了vue3(vite)設置代理封裝axios api解耦,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、設置代理
打開根目錄下的vite.config.js文件,設置代理
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 設置代理
server: {
proxy: {
'/api': 'xxx'
}
}
})二、axios封裝
先下載axios
npm install axios -S
在根目錄下新建utils/request.js,簡單封裝axios
import axios from 'axios';
//1. 創(chuàng)建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文件
在utils文件夾下創(chuàng)建文件夾api創(chuàng)建courseManage.js文件
import request from './request'
export function Fun( data ){
return request({
url:'xxx',
method:"post",
data
})
}四、安裝unplugin-auto-import插件(vite版本)
npm i unplugin-auto-import -D
打開vite.config.js中配置unplugin-auto-import
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入unplugin-auto-import/vite插件
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
imports: ['vue', 'vue-router']//自動導入vue和vue-router相關函數(shù)
})
],
// 設置代理
server: {
proxy: {
'/api': 'http://testapi.xuexiluxian.cn'
}
}
})到此這篇關于vue3(vite)設置代理封裝axios api解耦的文章就介紹到這了,更多相關vue3 vite設置代理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
???????基于el-table和el-pagination實現(xiàn)數(shù)據的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據的分頁效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08

