問題描述

采用vue-cli構建項目，接口轉發如下

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

在開發環境下，配置了這個，可以解決在開發環境下的跨域請求，那么在生產環境下 通過 npm run build打包之后，這一塊的問題vue-cli會自己處理嗎？在生產環境下還需要注意什么東西？求大神解答

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);});

假設請求如上api（生產環境沒有跨域），在本地配置接口轉發之后可以請求到數據，那么在生產環境應該要怎么樣？直接打包之后，將資源放在服務器嗎？

問題解答

vue-cli不會幫你處理。。開發環境使用本地代理的接口，生產環境使用正式的接口，這個自己代碼里邏輯寫好就可以了，根據不同環境調用不同的接口地址

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