vue项目在开发环境和生产环境接口地址配置简记

开发环境

在开发环境中，由于前后台并不是放在同一个服务器中的，所以这个时候就需要配置代理，打开vue项目的config/index.js文件，找到dev对象里的proxyTable配置如下：

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 配置后台通信
    proxyTable: {
      '/api': {
        // 本地
        target: 'http://localhost:8089/yunhai/api',
        // target: 'http://127.0.0.1:8089',
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': ''   //需要rewrite的,
        }
      }
    },
    ...... // 后面的属性这里省略
}

target是你要连接的服务器（可以是域名也可以是ip地址），pathRewrite是重定向。怎么理解呢？

比如我的项目名是yunhai，我有一个登录接口是api/account/login

向后台发起请求，那么请求路径就是

本质上其实我们是要访问http://localhost:8089/yunhai/api/account/login接口，所以上面我们配置target为http://localhost:8089/yunhai/api，意思是‘/api’映射为http: //localhost:8089/yunhai/api，再加上api/account/login，实际上访问的接口就是http://localhost:8089/yunhai/api/api/account/login,比要访问的多了一个/api，因此用到

pathRewrite: {
            '^/api': ''   //需要rewrite的,
        }

 将/api替换成空字符串，最后访问的就是http://localhost:8089/yunhai/api/account/login

生产环境

生产环境后端和前端包是放在同一个服务器中的（都放在tomcat的webapp文件夹里），因此不需要代理，或者说代理对生产环境不起作用。这时同样按照上面向后台发起请求的方式，实际访问的是http://localhost:8089/api/account/login，缺少了项目名称，因此，我们可以在封装的$httpUtils工具里这么处理

在访问接口前添加一个server常量，开发环境为空字符串，生产环境则设置为项目名称，这时访问的就是正确的接口地址了。

其实，无论是生产环境还是开发环境，本质上在于如何拼出正确的接口地址。