詳解基于Vue-cli搭建的項(xiàng)目如何和后臺(tái)交互
這段時(shí)間在折騰有vue做開(kāi)發(fā)，之前也用過(guò)，但是大部分都是用一些簡(jiǎn)單的數(shù)據(jù)綁定。踏了很多坑，總結(jié)了一下，希望對(duì)剛剛開(kāi)始折騰的小伙伴有幫助。
常見(jiàn)問(wèn)題一：用vue-cli搭好環(huán)境以后，本地域名和測(cè)試環(huán)境的域名不一致，怎么跨域訪問(wèn)后臺(tái)接口？
在config目錄下找到index.js，在dev下添加如下:
proxyTable: {
'/api':{//指定以/api開(kāi)頭的接口都走代理
target:'https://yhhdtest.moguyun.com',//需要連接后臺(tái)接口的域名
changeOrigin:true,//支持跨域
pathRewrite:{
'/api':''
}
}
},
以上的配置其實(shí)是dev-server 使用了非常強(qiáng)大的 http-proxy-middleware 包。更多高級(jí)用法，請(qǐng)查閱其文檔。
請(qǐng)求/api/getGame實(shí)際發(fā)出去的請(qǐng)求是 https://yhhdtest.moguyun.com/getGame
配置一個(gè)適用于本地和生產(chǎn)環(huán)境的后臺(tái)請(qǐng)求
按照上面的配置好以后，本地環(huán)境可以成功的跨域和后臺(tái)交互了。但是每個(gè)接口前面都要加一個(gè)原本不需要的/api前綴，這個(gè)其實(shí)和我們生產(chǎn)是不符合的。這個(gè)時(shí)候需要我們做一些配置，通過(guò)編譯來(lái)區(qū)分。
在index.js下分別找到dev和prod（有的項(xiàng)目可能直接抽出來(lái)，單獨(dú)成文件了）
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"/api/"'
})
prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST:'""'
}
關(guān)鍵點(diǎn)在于API_HOST，這個(gè)時(shí)候我們的請(qǐng)求可以這么寫(xiě)
process.env.API_HOST+'/getGame'
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
在Vue開(kāi)發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場(chǎng)景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue-cli webpack 開(kāi)發(fā)環(huán)境跨域詳解
本篇文章主要介紹了vue-cli webpack 開(kāi)發(fā)環(huán)境跨域詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,尤其是當(dāng)表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過(guò)多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開(kāi)發(fā)中非常常見(jiàn),我們經(jīng)常需要在頁(yè)面中為某個(gè)DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤(pán)敲擊等等,需要的朋友可以參考下2023-09-09
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開(kāi)發(fā)經(jīng)常遇到異步的問(wèn)題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動(dòng)導(dǎo)航條
這篇文章主要介紹了Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動(dòng)導(dǎo)航條，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請(qǐng)求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
uniapp中設(shè)置全局頁(yè)面背景色的簡(jiǎn)單教程
uni-app如何設(shè)置頁(yè)面全局背景色,其實(shí)非常簡(jiǎn)單,一句話即可,但有時(shí)候也會(huì)踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁(yè)面背景色的相關(guān)資料,需要的朋友可以參考下2023-03-03