vue3(vite)設(shè)置代理封裝axios api解耦功能
一、設(shè)置代理
打開根目錄下的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,簡單封裝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. 響應(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
打開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ǎ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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實現(xiàn)代碼
我在做一個調(diào)用虛擬機錄屏的一個操作,需要在瀏覽器頁面上,點擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個頁面,并且打開瀏覽器新頁面是虛擬機的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09