基於Vuecli搭建的項目怎樣和背景交互

這段時刻在折騰有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/&＃8230;

設置一個適用於當地和臨盆環境的背景要求

根據上面的設置好今後，當地環境能夠勝利的跨域和背景交互了。然則每一個接口前面都要加一個底本不須要的/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'