這段時間在折騰有vue做開發(fā)，之前也用過，但是大部分都是用一些簡單的數(shù)據(jù)綁定。踏了很多坑，總結(jié)了一下，希望對剛剛開始折騰的小伙伴有幫助。

常見問題一：用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:'""'}

關(guān)鍵點在于API_HOST，這個時候我們的請求可以這么寫

process.env.API_HOST+'/getGame'

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。