這篇文章主要介紹了詳解基於Vue-cli搭建的項目如何和後台交互,內容挺不錯的,現在分享給大家,也給大家做個參考。
這段時間在折騰有vue做開發,之前也用過,但是大部分都是用一些簡單的資料綁定。踏了很多坑,總結了一下,希望對剛開始折騰的夥伴有幫助。
常見問題一:用vue-cli搭好環境以後,本地域名和測試環境的網域不一致,怎麼跨網域存取後台介面?
在config目錄下找到index.js,在dev下方加入如下:
proxyTable: { '/api':{//指定以/api开头的接口都走代理 target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名 changeOrigin:true,//支持跨域 pathRewrite:{ '/api':'' } } },
以上的設定其實是dev- server 使用了非常強大的http-proxy-middleware 套件。更多進階用法,請查閱其文件。
請求/api/getGame實際發出去的請求是https://yhhdtest.moguyun.com/getGame
設定一個適用於本地和生產環境的後台請求
按照上面的配置好以後,本地環境可以成功的跨域和後台互動了。但是每個介面前面都要加一個原本不需要的/api前綴,這個其實跟我們生產是不符合的。這個時候需要我們做一些配置,透過編譯來區分。
在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'
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
########### ##########
以上是基於Vue-cli搭建的專案如何和後台互動的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!