Vue項目開發環境proxyTable反向代理，生產環境下服務接口地址找不到的解決

應用場景

在vue項目的開發，開發環境下我們通過proxyTable反向代理的操作，會在本地開啟一個node服務器，以解決開發環境下的后台服務跨域問題，但是這樣的代碼打包上傳到服務器上時服務的URL地址就會報錯，因為在服務器上並沒有幫我搭建這樣一個生產環境時的代理服務器。

原因解析

1. 配置了反向代理

   

2. 使用的時候路勁自帶了ustbhuangyi,但是這只看開發環境下的，生產環境下，識別不了這個apis

解決方法

（一）通過代碼判定是生產環境還是開發環境，然后拼接URL，該方法比較麻煩，需要修改代碼

var prodUrl="http://121.115.42.106:8079";
var devUrl="/apis";
var curUrl="";
process.env.NODE_ENV==='development' ? curUrl=devUrl: curUrl=prodUrl;  //這句最重要

this.$axios.get(curUrl+'/handlerPage/GetFTPFilesHandler.ashx', {
  params: {
      XMBH: xmbh
  }
})

（二）配置Nginx服務器反向代理，此方法是在代碼部署到我們的Nginx服務器上時，修改我們的Nginx配置，在服務器上做代理, 首先找的我們Nginx的配置文件，我這里是/etc/nginx/sites-enabled/default，不同的生產環境可能目錄不同，然后在配置文件的server選項中加入以下代碼

代理轉發是在server下面的location進行配置

# 配置代理轉發
location ^~/ustbhuangyi/ { # location 后面加的匹配的路勁
    proxy_pass http://ustbhuangyi.com/;   # proxy_pass 設置轉發的路勁
}
location ^~/hjj/ {
    proxy_pass http://47.95.207.1:3000/;
}

需要注意的是這里訪問我么nginx地址，~(IP+端口)/ustbhuangyi 的請求會被轉發到http://ustbhuangyi.com/ustbhuangyi，這是因為如果proxy_pass參數中如果不包含url的路徑，則會將location的pattern識別的路徑作為絕對路徑。

修改之后重啟Nginx服務，nginx -s reload, 這樣我們的nginx就可以幫我們做代理了

（三）修改Vue開發的配置文件

如圖是我們通過vue init webpack project-name 自動化構建的項目目錄，其中config目錄中包含了我們生產和開發環境的兩個配置文件

                                            

• 我們可以在dev.env.js和prod.env.js中設置不同的接口地址

1. prod.env.js的配置

   var merge = require('webpack-merge')
   var prodEnv = require('./prod.env')
    
   module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     API_ROOT: '"//192.168.1.8/api"'     // 配置接口地址
   })

2. dev.env.js的配置

   module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"//www.baidu.com/api"'
   }

• 在我們的公共api文件，即存放調用接口方法的文件中配置我們的API接口地址，這里不同的人寫法不一樣，如果大家沒有將api訪問的方法放到一個文件里，那么這里就需要在每個調用接口的地方修改地址，所以建議最好把訪問api的操作放到一塊。然后我們就可以在該文件的最上方定義一個接口地址的變量

  // 配置API接口地址
  var root = process.env.API_ROOT

  這樣，在不同的環境中，root就指向不同的地址了。

 　參考文檔：https://blog.csdn.net/happy81997/article/details/103087530逆戰