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