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ù)據(jù)的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08