詳解基于Vue-cli搭建的項(xiàng)目如何和后臺(tái)交互
這段時(shí)間在折騰有vue做開發(fā)，之前也用過，但是大部分都是用一些簡單的數(shù)據(jù)綁定。踏了很多坑，總結(jié)了一下，希望對(duì)剛剛開始折騰的小伙伴有幫助。
常見問題一：用vue-cli搭好環(huán)境以后，本地域名和測試環(huán)境的域名不一致，怎么跨域訪問后臺(tái)接口？
在config目錄下找到index.js，在dev下添加如下:
proxyTable: {
'/api':{//指定以/api開頭的接口都走代理
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í)候需要我們做一些配置，通過編譯來區(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í)候我們的請(qǐng)求可以這么寫
process.env.API_HOST+'/getGame'
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了Vue2.0生命周期，思考與理解“el被新創(chuàng)建的vm.$el替換”這句話，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Vue props中Object和Array設(shè)置默認(rèn)值操作
這篇文章主要介紹了Vue props中Object和Array設(shè)置默認(rèn)值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue組件化中slot的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加逗號(hào)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下2022-11-11
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案
最近小編遇到這樣的問題當(dāng)vue單頁面按F5強(qiáng)刷，數(shù)據(jù)就恢復(fù)初始了，這怎么辦呢？下面小編給大家?guī)砹薞ue單頁面應(yīng)用保證F5強(qiáng)刷不清空數(shù)據(jù)的解決方案，感興趣的朋友一起看看吧2018-01-01
vue中radio根據(jù)動(dòng)態(tài)值綁定checked無效的解決
這篇文章主要介紹了vue中radio根據(jù)動(dòng)態(tài)值綁定checked無效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在 Vue 的開發(fā)中，我們經(jīng)常會(huì)用到外部組件庫，這篇文章主要介紹了vue、angular深度作用選擇器,需要的朋友可以參考下2019-09-09