問題描述

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

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

在開發(fā)環(huán)境下，配置了這個，可以解決在開發(fā)環(huán)境下的跨域請求，那么在生產(chǎn)環(huán)境下 通過 npm run build打包之后，這一塊的問題vue-cli會自己處理嗎？在生產(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è)請求如上api（生產(chǎn)環(huán)境沒有跨域），在本地配置接口轉(zhuǎn)發(fā)之后可以請求到數(shù)據(jù)，那么在生產(chǎn)環(huán)境應該要怎么樣？直接打包之后，將資源放在服務(wù)器嗎？

問題解答

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

這個是vue-cli對反向代理的一個實現(xiàn)，方便開發(fā)環(huán)境使用。生產(chǎn)環(huán)境中反向代理的方式也有很多：nginx、Apache之類的，如果沒有跨域，不需要反向代理的話，就把前端代碼直接丟在接口服務(wù)器中就行了(tomcat、jboss之類)，但不推薦，靜態(tài)資源就應該走靜態(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;}}