介绍
这篇文章将为大家详细讲解有关vue如何设置接口请求地址前缀本地开发和线上开发的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
开发环境配置/dev.env。js
& # 39;使用严格# 39; 常量合并=要求(& # 39;webpack-merge& # 39;) const prodEnv=要求(& # 39;。/dev.env& # 39;) 模块。出口=合并(prodEnv, { NODE_ENV: & # 39;“development" & # 39; API_ROOT: & # 39;“https://www.dev.com" & # 39;//本地请求前缀 })
线上开发环境配置/prod.env。js
& # 39;使用严格# 39; 常量合并=要求(& # 39;webpack-merge& # 39;) const prodEnv=要求(& # 39;。/prod.env& # 39;) 模块。出口=合并(prodEnv, { NODE_ENV: & # 39;“production" & # 39; API_ROOT: & # 39;“https://www.prov.com" & # 39;//线上请求前缀 })
在请求之前,组装URL, axios。js
从& # 39;进口Axios axios& # 39;; var根=process.env.API_ROOT;//请求拦截 axios.interceptors.request.use((配置)=比;{//请求之前重新拼装url 配置。url=根+ config.url; 返回配置; });
页面使用模板:
出口默认{ 名称:& # 39;订单# 39; 数据(){ 返回{ order_list: [] } }, 方法:{ fetchList:函数(){ 美元。axios.post (& # 39;/api/order_list& # 39;),然后((res)=比;{ 如果(res)。结果===& # 39;0000 & # 39;){ 这一点。order_list=res.data; } }); } } }
<>强vue中axios固定网址请求前缀强>
主要。js中添加:
使用方法:
关于vue如何设置接口请求地址前缀本地开发和线上开发的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。