亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3(vite)設(shè)置代理封裝axios api解耦功能

 更新時間:2022年12月26日 15:19:50   作者:微光無限  
這篇文章主要介紹了vue3(vite)設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

一、設(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)文章

  • vue3使用Vite打包組件庫從0搭建過程詳解

    vue3使用Vite打包組件庫從0搭建過程詳解

    這篇文章主要為大家介紹了vue3使用Vite打包組件庫從0搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決

    vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決

    這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vite+vue3搭建的工程熱更新失效問題及解決

    vite+vue3搭建的工程熱更新失效問題及解決

    這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 解決vue-cli腳手架打包后vendor文件過大的問題

    解決vue-cli腳手架打包后vendor文件過大的問題

    今天小編就為大家分享一篇解決vue-cli腳手架打包后vendor文件過大的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • ???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果

    ???????基于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-08
  • vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實現(xiàn)代碼

    vue 跳轉(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
  • vue關(guān)閉瀏覽器退出登錄的實現(xiàn)示例

    vue關(guān)閉瀏覽器退出登錄的實現(xiàn)示例

    本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個事件執(zhí)行的。本文就詳細的介紹一下如何實現(xiàn),感興趣的可以了解一下
    2021-12-12
  • vue封裝的Tag標(biāo)簽雙擊編輯單擊選中可刪除

    vue封裝的Tag標(biāo)簽雙擊編輯單擊選中可刪除

    項目中需要制作一個雙擊編輯單擊選中可刪除Tag標(biāo)簽,本文就來介紹一下如何實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • 詳解Vue3中Teleport的使用

    詳解Vue3中Teleport的使用

    門戶(Portal)的概念是Vue3的新功能之一,也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見功能,Vue2 的 portal-vue  庫也提供了相似的功能。在 Vue3 中用 Teleport 對這個概念提供了原生支持。本文將介紹Teleport的相關(guān)用法
    2021-05-05
  • 實現(xiàn)vue圖片縮放方式-拖拽組件

    實現(xiàn)vue圖片縮放方式-拖拽組件

    這篇文章主要介紹了實現(xiàn)vue圖片縮放方式-拖拽組件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論