vue3(vite)設(shè)置代理封裝axios api解耦功能
更新時(shí)間：2022年12月26日 15:19:50 作者：微光無(wú)限
這篇文章主要介紹了vue3（vite）設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、設(shè)置代理
打開(kāi)根目錄下的vite.config.js文件，設(shè)置代理
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 設(shè)置代理
server: {
proxy: {
'/api': 'xxx'
}
}
})二、axios封裝
先下載axios
npm install axios -S
在根目錄下新建utils/request.js，簡(jiǎn)單封裝axios
import axios from 'axios';
//1. 創(chuàng)建axios對(duì)象
const service = axios.create();
//2. 請(qǐng)求攔截器
service.interceptors.request.use(config => {
return config;
}, error => {
Promise.reject(error);
});
//3. 響應(yīng)攔截器
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
打開(kāi)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']//自動(dòng)導(dǎo)入vue和vue-router相關(guān)函數(shù)
})
],
// 設(shè)置代理
server: {
proxy: {
'/api': 'http://testapi.xuexiluxian.cn'
}
}
})到此這篇關(guān)于vue3（vite）設(shè)置代理封裝axios api解耦的文章就介紹到這了,更多相關(guān)vue3 vite設(shè)置代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解
這篇文章主要為大家介紹了vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue-cli腳手架打包后vendor文件過(guò)大的問(wèn)題
今天小編就為大家分享一篇解決vue-cli腳手架打包后vendor文件過(guò)大的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果
本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁(yè)面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面,并且打開(kāi)瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12
項(xiàng)目中需要制作一個(gè)雙擊編輯單擊選中可刪除Tag標(biāo)簽,本文就來(lái)介紹一下如何實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
門(mén)戶（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見(jiàn)功能，Vue2 的 portal-vue 庫(kù)也提供了相似的功能。在 Vue3 中用 Teleport 對(duì)這個(gè)概念提供了原生支持。本文將介紹Teleport的相關(guān)用法2021-05-05
這篇文章主要介紹了實(shí)現(xiàn)vue圖片縮放方式-拖拽組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04