Vue项目开发环境proxyTable反向代理，生产环境下服务接口地址找不到的解决

应用场景

在vue项目的开发，开发环境下我们通过proxyTable反向代理的操作，会在本地开启一个node服务器，以解决开发环境下的后台服务跨域问题，但是这样的代码打包上传到服务器上时服务的URL地址就会报错，因为在服务器上并没有帮我搭建这样一个生产环境时的代理服务器。

原因解析

配置了反向代理
使用的时候路劲自带了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中设置不同的接口地址

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"'     // 配置接口地址
})

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逆战