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

這篇文章主要介紹了詳解基於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中文網其他相關文章！