欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)

 更新時(shí)間:2018年05月08日 11:35:50   作者:zeroyulong  
這篇文章主要介紹了vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

本項(xiàng)目是vue-cli搭建的項(xiàng)目框架,引入axios用于數(shù)據(jù)請(qǐng)求。配置不同的接口地址,(首先確保已經(jīng)集成了axios,如對(duì)集成axios有疑問的道友,可參看我之間的一篇vue-cli 引入axios)操作如下

一、設(shè)置不同的接口地址

找到如下文件

/config/dev.env.js

/config/prod.env.js

之后增加接口地址域名配置,增加后的文件內(nèi)容如下


二、在自己重新封裝的axios文件中(api/api.js),將配置好的接口地址作為baseURL拼接到接口路徑中

詳細(xì)的api.js文件可參考如下代碼,根據(jù)自己公司項(xiàng)目組編碼習(xí)慣可自作調(diào)整

// 配置API接口地址 
var root = process.env.API 
// 引用axios 
var axios = require('axios') 
// 自定義判斷元素類型JS 
function toType (obj) { 
 return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() 
} 
// 參數(shù)過濾函數(shù) 
function filterNull (o) { 
 for (var key in o) { 
 if (o[key] === null) { 
  delete o[key] 
 } 
 if (toType(o[key]) === 'string') { 
  o[key] = o[key].trim() 
 } else if (toType(o[key]) === 'object') { 
  o[key] = filterNull(o[key]) 
 } else if (toType(o[key]) === 'array') { 
  o[key] = filterNull(o[key]) 
 } 
 } 
 return o 
} 
function apiAxios (method, url, params, success, failure) { 
 if (params) { 
 params = filterNull(params) 
 } 
 axios({ 
 method: method, 
 url: url, 
 data: method === 'POST' ? params : null, 
 params: method === 'GET' ? params : null, 
 baseURL: root, 
 withCredentials: false 
 }) 
 .then(function (res) { 
 console.log(res); 
 return; 
 if (res.data.success === true) { 
  if (success) { 
  success(res.data) 
  } 
 } else { 
  if (failure) { 
  failure(res.data) 
  } else { 
  window.alert('error: ' + JSON.stringify(res.data)) 
  } 
 } 
 }) 
 .catch(function (err) { 
 let res = err.response 
 if (err) { 
  window.alert('api error, HTTP CODE: ' + res.status) 
  return 
 } 
 }) 
} 
// 返回在vue模板中的調(diào)用接口 
export default { 
 get: function (url, params, success, failure) { 
 return apiAxios('GET', url, params, success, failure) 
 }, 
 post: function (url, params, success, failure) { 
 return apiAxios('POST', url, params, success, failure) 
 } 
} 

三、修改main.js,引入自己重新封裝好的axios文件(api/api.js),修改好的文件如下圖所示

四、在頁(yè)面中調(diào)用,測(cè)試是否生效,開發(fā)環(huán)境調(diào)通后,build之后查看正式環(huán)境是否也生效

直接調(diào)用ajax請(qǐng)求

export default {  
 created(){ 
  this.$http.post('Web/test',null, res => { 
  console.log(res) 
  }) 
 } 
} 

總結(jié)

以上所述是小編給大家介紹的vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue源碼分析之虛擬DOM詳解

    Vue源碼分析之虛擬DOM詳解

    所謂虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計(jì)出來(lái)的。如前,若一次操作中有 10 次更新 這篇文章主要給大家介紹了關(guān)于Vue源碼分析之虛擬DOM的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例

    vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例

    今天小編就為大家分享一篇vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2019-10-10
  • Spring boot 和Vue開發(fā)中CORS跨域問題解決

    Spring boot 和Vue開發(fā)中CORS跨域問題解決

    這篇文章主要介紹了Spring boot 和Vue開發(fā)中CORS跨域問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-09-09
  • Vue寶典之this.$refs屬性的使用

    Vue寶典之this.$refs屬性的使用

    Vue.js中的refs屬性是一個(gè)非常有用的特性,它允許我們?cè)诮M件中操作 DOM 元素和組件實(shí)例,本文來(lái)介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下
    2023-12-12
  • 基于vue.js快速搭建圖書管理平臺(tái)

    基于vue.js快速搭建圖書管理平臺(tái)

    Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM(Model-View-ViewModel)庫(kù).這篇文章主要介紹了基于vue.js快速搭建圖書管理平臺(tái) ,需要的朋友可以參考下
    2017-10-10
  • vue配置代理服務(wù)器proxy 多種方法示例詳解

    vue配置代理服務(wù)器proxy 多種方法示例詳解

    這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例

    vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例

    這篇文章主要介紹了vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-07-07
  • Vue導(dǎo)航守衛(wèi)使用教程詳解

    Vue導(dǎo)航守衛(wèi)使用教程詳解

    這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程,可以向任意給定的導(dǎo)航守衛(wèi)傳遞next,但是next的使用過程容易出錯(cuò),需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次
    2023-04-04
  • Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解

    Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解

    這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)

    Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)

    前后端分離的項(xiàng)目,遇到了對(duì)密碼進(jìn)行加密的情況,在前端或者是在后端加密都是可以的,本文主要介紹了Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04

最新評(píng)論