Vue+axios+Nginx实现接口地址多环境配置抽离

背景

新加入一个项目，发现前端同事每次打包Vue工程时都要检查调用后台的接口地址是否正确，不然部署到生产环境却调用测试环境接口就尴尬了。当时就好奇，难道前端不能自适应环境吗？

如果能做到一次打包所有环境通用，既提高了效率，也能满足测试的基本要求，测试过的物件就是发布所需的物件。

解决方案

相对路径

其实解决这个问题，使用相对路径是最直接的方法，vue项目使用axios组件进行http接口调用，忽略baseURL参数，url以/开头，实际的请求地址就是<scheme>://<host>:<port><url>

axios({
  //请求方式为post
  method: 'post',
  //绝对路径
  url: '/pic/',
  //`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。
  baseURL: '',
  //data等设置省略
  ......
});

例如后台登录接口地址为http://demo.com/api/login,无论前端部署在http://demo.com/还是http://demo.com/adm上，url参数指定为/api/login，最终请求的地址都是网站根路径+/api/login，即：http://demo.com/api/login

proxyTable

前端同学很多实际开发过程中，调用接口是跨域调用后台接口，而且需要制定绝对的路径
这样配置url为相对路径就无法满足开发过程中的需求。
其实使用webpack的proxyTable即可

dev: {
  proxyTable: {
    '/api': {
      target: 'http://demo.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
}

Nginx抽离配置

基于以上的了解，我们可以在nginx中定义所有后台接口都以某个固定的前缀开头，例如/api

location ^~ /api/ {
    proxy_pass http://web/;
}

项目中在static目录使用单独的配置文件config.js，定义这个前缀

config={apiBase:'/api'}

请求时使用前缀拼接接口地址

axios.post(config.apiBase + "/login", data);

Nginx中根据需要自定义config.js的内容

#测试/生产环境
location = /static/config.js {
     default_type text/html;
     return 200 "config={apiBase:'/api'}";
}
#后台开发独立自验环境,${name}为某个开发人员的姓名拼音
location = /static/config.js {
     default_type text/html;
     return 200 "config={apiBase:'/${name}/api'}";
}
#代理开发人员本地的服务
location ^~ /${name}/api/ {
    proxy_pass http://${name}_web/;
}

总结

使用相对路径+配置文件解决接口地址可配置的问题，使用nginx固定配置文件内容，通过nginx返回不同的内容适配不同的环境。