首頁 >web前端 >js教程 >基於Vue-cli搭建的專案如何和後台互動的介紹

基於Vue-cli搭建的專案如何和後台互動的介紹

不言
不言原創
2018-06-30 09:43:232599瀏覽

這篇文章主要介紹了詳解基於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解決跨域路由衝突問題的想法

關於vue.js前後端數據交互之提交資料的操作

基於vue cli重建多頁面腳手架過程的介紹

########### ##########

以上是基於Vue-cli搭建的專案如何和後台互動的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn