Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟詳解
1.創(chuàng)建vue項(xiàng)目
vue create demo
demo是項(xiàng)目名稱
2.安裝axios
進(jìn)入demo里面打開終端(黑窗口),執(zhí)行
npm install axios
3.進(jìn)行config.js配置
devServer: {
host: "0.0.0.0", // 是否可以被覆蓋
port: 8090, // 配置本地端口號(hào)
open: true,
//解決跨域問題
proxy: {
// 正式
"/api": {
target: "http://IP地址:端口號(hào)/",
changeOrigin: true,
secure: false, // 如果是https接口,需要配置這個(gè)參數(shù)
pathRewrite: {
"^/api": "",
},
},
},
},
},4.main.js里引入
//http封裝請(qǐng)求 import axios from "axios"; axios.defaults.baseURL = "/api"; axios.defaults.headers = //公共攜帶請(qǐng)求頭 //大部分是 "Content-Type:application/json;charset=UTF-8" axios.defaults.withCredentials = true;
5.src目錄下新建Utils文件夾,在內(nèi)封裝request.js
import axios from "axios";//引入axios
const request = axios.create({//進(jìn)一步封裝axios
baseURL: "/api",//配置跟路由
timeout: 5000,//配置請(qǐng)求超時(shí)時(shí)間
});
//添加請(qǐng)求攔截器
request.interceptors.request.use(function (config) {}
//添加響應(yīng)攔截器
request.interceptors.request.use((res) => {
return res;
}),
(err) => {
return Promise.reject(err);
};
export default request;
//暴露出去6.以login路由為示例 src文件下新建api文件,在api內(nèi)新建login.js
import request from "@/utils/request"; // 引入request
// 登錄
export const UserLogin = (params) => {//封裝login請(qǐng)求
return request({
url: "/login",//請(qǐng)求地址
method: "post",//請(qǐng)求方式
data: params,//請(qǐng)求體
});
};7.在頁面內(nèi)引入方法,并使用


簡(jiǎn)單明了
到此這篇關(guān)于Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟詳解的文章就介紹到這了,更多相關(guān)Vue網(wǎng)絡(luò)請(qǐng)求代理到封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中獲取滾動(dòng)table的可視頁面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同)
這篇文章主要介紹了vue中獲取滾動(dòng)table的可視頁面寬度,調(diào)整表頭與列對(duì)齊(每列寬度不都相同),需要的朋友可以參考下2019-08-08
vue移動(dòng)端UI框架實(shí)現(xiàn)QQ側(cè)邊菜單組件
這篇文章主要介紹了vue移動(dòng)端UI框架實(shí)現(xiàn)仿qq側(cè)邊菜單組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問的頁面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn),不包含具體的權(quán)限驗(yàn)證和登錄請(qǐng)求,需要的朋友可以參考下2022-12-12

