导航:首页 > 网络设置 > vue网络设置方法

vue网络设置方法

发布时间:2022-12-19 14:18:38

‘壹’ vue开发中有几种网络请求方式用哪一种

选择什么网络模块?Vue中发送网络请求有非常多的方式,那么,在开发中,如何选择呢?

选择一:传统的ajax是基于XMLHTTPRequest(XHR)
为什么不用他呢?
非常好解释,配置和调用方式等非常混乱
编码起来非常蛋疼

选择二:JQuery-Ajax 相遇与传统的ajax非常好用
为什么不用他?
Vue项目中不适用jquery了。
专门适用ajax专门引用jquery,麻烦

选择三: vue-resource 体积小
为什么不用他?
不再更新。

选择四:axios 用起来方便
功能特点:
在浏览器中发送xmlhttprequest请求
在node.js中发送http请求
支持promiseApi
拦截请求和响应
转换请求和响应数据

‘贰’ vue 前端设置跨域多代理

在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理,本文以vue-element-admin为例展示步骤如下:
1: 配置环境变量 .env.development

2: 配置项目根目录下的vue.config.js 找到devServer

PS:注意VUE_APP_BASE_API 放在数组的最后一个,如果你VUE_APP_BASE_API跟我一样设置为'' 的话,这样才不会被代理的虚拟path覆盖!

3: 找到项目中管理请求地址的文件 src/api/proxy.js (proxy.js 是我随便起的名字😄)

打开proxy.js

proxy_api 就是你之前在步骤1:中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一个路径处理函数,参数是'/xx/xxx/fetch/list',return (proxy_api + path)

需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空:

所以不需要在src/utils/request.js 中对代理的请求进行拦截

如果你为VUE_APP_BASE_API设置了虚拟path路径,那么就需要在src/utils/request.js为这个虚拟路径配置拦截,比较麻烦比不建议这么做。

至此跨域多代理已经设置完了,本文中设置两个代理一个基础代理VUE_APP_BASE_API,一个额外代理VUE_APP_BASE_API_PROXY,默认情况下走基础代理,当请求匹配到匹'/proxy-api' 时走额外代理~

阅读全文

与vue网络设置方法相关的资料

热点内容
共享网络安全点 浏览:421
海康威视球机网络信号转bnc 浏览:322
山区网络差有什么办法 浏览:13
网络摄像头直接用网线接电脑 浏览:596
计算机网络实践实训摘要 浏览:818
为什么网卡无网络访问权限 浏览:998
ipv4做网络层首部不包括哪个字段 浏览:578
如何规划网络系统 浏览:847
网络语尿性是什么意思 浏览:952
菜鸟网络属于哪个国家 浏览:160
显示已连接但无网络 浏览:317
冰川校园网络电脑怎么下载 浏览:515
云浮市场网络推广多少钱 浏览:202
只开通电视不开通网络多少钱 浏览:272
在同一网络下怎么连接另一台电脑 浏览:602
工商户联络员注册网络异常 浏览:712
华为手机的网络嗅敏功能怎么找 浏览:873
网络垃圾举报中心的电话是多少 浏览:423
有线网络没有wifi 浏览:697
中国联通网络机顶盒能用手机吗 浏览:519

友情链接