基於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/...

配置一個適用於本地和生產環境的後臺請求

按照上面的配置好之後，本地環境能夠成功的跨域和後臺交互了。可是每一個接口前面都要加一個本來不須要的/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'