Vue

背景 新加入一个项目，发现前端同事每次打包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返回不同的内容适配不同的环境。 ...