基于Vue-cli搭建的项目如何和后台交互

这段时间在折腾有vue作开发，以前也用过，可是大部分都是用一些简单的数据绑定。踏了不少坑，总结了一下，但愿对刚刚开始折腾的小伙伴有帮助。

常见问题一：用vue-cli搭好环境之后，本地域名和测试环境的域名不一致，怎么跨域访问后台接口？

在config目录下找到index.js，在dev下添加以下:

proxyTable: {
      '/api':{//指定以/api开头的接口都走代理
          target:'https://yhhdtest.moguyun.com',//须要链接后台接口的域名
          changeOrigin:true,//支持跨域
          pathRewrite:{
              '/api':''
          }
      }
    },

以上的配置实际上是dev-server 使用了很是强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。

请求/api/getGame实际发出去的请求是 https://yhhdtest.moguyun.com/...

配置一个适用于本地和生产环境的后台请求

按照上面的配置好之后，本地环境能够成功的跨域和后台交互了。可是每一个接口前面都要加一个本来不须要的/api前缀，这个其实和咱们生产是不符合的。这个时候须要咱们作一些配置，经过编译来区分。

在index.js下分别找到dev和prod（有的项目可能直接抽出来，单独成文件了）

dev.env.js
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_HOST:'"/api/"'
})

prod.env.js
module.exports = {
    NODE_ENV: '"production"',
    API_HOST:'""'
}

关键点在于API_HOST，这个时候咱们的请求能够这么写

process.env.API_HOST+'/getGame'