詳解基于Vue-cli搭建的項目如何和后臺交互
更新時間：2018年06月29日 14:14:41 作者：xieyanmei
這篇文章主要介紹了詳解基于Vue-cli搭建的項目如何和后臺交互，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
這段時間在折騰有vue做開發(fā)，之前也用過，但是大部分都是用一些簡單的數(shù)據(jù)綁定。踏了很多坑，總結了一下，希望對剛剛開始折騰的小伙伴有幫助。
常見問題一：用vue-cli搭好環(huán)境以后，本地域名和測試環(huán)境的域名不一致，怎么跨域訪問后臺接口？
在config目錄下找到index.js，在dev下添加如下:
proxyTable: {
'/api':{//指定以/api開頭的接口都走代理
target:'https://yhhdtest.moguyun.com',//需要連接后臺接口的域名
changeOrigin:true,//支持跨域
pathRewrite:{
'/api':''
}
}
},
以上的配置其實是dev-server 使用了非常強大的 http-proxy-middleware 包。更多高級用法，請查閱其文檔。
請求/api/getGame實際發(fā)出去的請求是 https://yhhdtest.moguyun.com/getGame
配置一個適用于本地和生產(chǎn)環(huán)境的后臺請求
按照上面的配置好以后，本地環(huán)境可以成功的跨域和后臺交互了。但是每個接口前面都要加一個原本不需要的/api前綴，這個其實和我們生產(chǎn)是不符合的。這個時候需要我們做一些配置，通過編譯來區(qū)分。
在index.js下分別找到dev和prod（有的項目可能直接抽出來，單獨成文件了）
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"/api/"'
})
prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST:'""'
}
關鍵點在于API_HOST，這個時候我們的請求可以這么寫
process.env.API_HOST+'/getGame'
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vuex 實現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了Vue2.0生命周期，思考與理解“el被新創(chuàng)建的vm.$el替換”這句話，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Vue props中Object和Array設置默認值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關于vue組件化中slot的基本使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加
這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號最后不加逗號示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下2022-11-11
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue單頁面應用保證F5強刷不清空數(shù)據(jù)的解決方案
最近小編遇到這樣的問題當vue單頁面按F5強刷，數(shù)據(jù)就恢復初始了，這怎么辦呢？下面小編給大家?guī)砹薞ue單頁面應用保證F5強刷不清空數(shù)據(jù)的解決方案，感興趣的朋友一起看看吧2018-01-01
vue中radio根據(jù)動態(tài)值綁定checked無效的解決
這篇文章主要介紹了vue中radio根據(jù)動態(tài)值綁定checked無效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
在 Vue 的開發(fā)中，我們經(jīng)常會用到外部組件庫，這篇文章主要介紹了vue、angular深度作用選擇器,需要的朋友可以參考下2019-09-09