vue3(vite)設置代理封裝axios api解耦功能
更新時間：2022年12月26日 15:19:50 作者：微光無限
這篇文章主要介紹了vue3（vite）設置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、設置代理
打開根目錄下的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相關(guān)函數(shù)
})
],
// 設置代理
server: {
proxy: {
'/api': 'http://testapi.xuexiluxian.cn'
}
}
})到此這篇關(guān)于vue3（vite）設置代理封裝axios api解耦的文章就介紹到這了,更多相關(guān)vue3 vite設置代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中動態(tài)獲取變量名并賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個小頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
這篇文章主要介紹了Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能,結(jié)合實例形式分析了vue.js前臺商品分頁、排序、篩選等功能及后臺node.js處理技巧,需要的朋友可以參考下2019-12-12
Element中table組件(el-table)右側(cè)滾動條空白占位處理
當我設置了max-height,就會在表格右側(cè)出現(xiàn)一列空白的占位,本文主要介紹了Element中table組件(el-table)右側(cè)滾動條空白占位處理,感興趣的可以了解一下2023-09-09
$once是一個函數(shù),可以為Vue組件實例綁定一個自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個實用小技巧,需要的朋友可以參考下2022-04-04
vue $set 實現(xiàn)給數(shù)組集合對象賦值
這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
在Vite項目中配置路由時,可能會遇到文件路徑錯誤導致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設置vite.config.js中的路徑別名以及重啟項目,通過正確配置,可以確保路由正確加載對應的界面文件,避免路徑錯誤導致的問題2024-10-10
本篇文章主要介紹了淺談Vue父子組件和非父子組件傳值問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個ref對象，需要注意的是它只會解析對象的第一層屬性，語法直接傳入對象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下2022-03-03
這篇文章介紹了在Linux服務器上部署vue項目的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11