vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)
本項(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+elementui 對(duì)話框取消 表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-10-10Spring boot 和Vue開發(fā)中CORS跨域問題解決
這篇文章主要介紹了Spring boot 和Vue開發(fā)中CORS跨域問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例
這篇文章主要介紹了vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue使用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