問(wèn)題描述

采用vue-cli構(gòu)建項(xiàng)目，接口轉(zhuǎn)發(fā)如下

proxyTable: { ’/api’: { target: ’http://abcd.com/api’, changeOrigin: true, pathRewrite: {’^/api’: ’’ }} }

在開(kāi)發(fā)環(huán)境下，配置了這個(gè)，可以解決在開(kāi)發(fā)環(huán)境下的跨域請(qǐng)求，那么在生產(chǎn)環(huán)境下 通過(guò) npm run build打包之后，這一塊的問(wèn)題vue-cli會(huì)自己處理嗎？在生產(chǎn)環(huán)境下還需要注意什么東西？求大神解答

axios.post(’api/auth/register’, { ’firstname’:this.firstname, ’lastname’:this.lastname, ’email’:this.email, ’password’:this.password, ’password_confirmation’:this.configPassword}).then(function (response) { console.log(response.data);}).catch(function (error) { console.log(error);});

假設(shè)請(qǐng)求如上api（生產(chǎn)環(huán)境沒(méi)有跨域），在本地配置接口轉(zhuǎn)發(fā)之后可以請(qǐng)求到數(shù)據(jù)，那么在生產(chǎn)環(huán)境應(yīng)該要怎么樣？直接打包之后，將資源放在服務(wù)器嗎？

問(wèn)題解答

vue-cli不會(huì)幫你處理。。開(kāi)發(fā)環(huán)境使用本地代理的接口，生產(chǎn)環(huán)境使用正式的接口，這個(gè)自己代碼里邏輯寫(xiě)好就可以了，根據(jù)不同環(huán)境調(diào)用不同的接口地址

這個(gè)是vue-cli對(duì)反向代理的一個(gè)實(shí)現(xiàn)，方便開(kāi)發(fā)環(huán)境使用。生產(chǎn)環(huán)境中反向代理的方式也有很多：nginx、Apache之類(lèi)的，如果沒(méi)有跨域，不需要反向代理的話，就把前端代碼直接丟在接口服務(wù)器中就行了(tomcat、jboss之類(lèi))，但不推薦，靜態(tài)資源就應(yīng)該走靜態(tài)服務(wù)器。我們的生產(chǎn)環(huán)境是nginx，配置大概是這樣的：

server {listen 80;server_name localhost;location / { root /home/project/; index index.html index.htm;}location /api { proxy_pass http://10.0.0.10:8080/api;}}