vue后端联调:vue-cli代理服务器

本文由清尘发表于2019-05-01 16:28最后修改于2019-07-31属于javascript分类

在正常开发中,前端和后端联调是必不可少的一环。由于我们已经采用前后端分离的方式进行开发,所以也就不需要在本地部署一套后端系统了。通常可以直接远程调用后端的数据接口(比如开发环境或测试环境的接口)。但在本地调试时,我们不能直接在前端页面中访问其他ip的接口,否则会有跨域的问题,所以一般也会在本地启动一个代理服务器,拦截前端页面的异步请求,从本地服务端转发到远程服务器,得到response后再返回给前端页面。
vue-cli搭建的webpack脚手架中就包含了一个微型的代理服务器,我们只需要进行一些配置,就可以在本地调用远程服务接口,在config/index.js中:

var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }
}

dev属性中的proxyTable就是服务的代理配置项,使用方式如下;

proxyTable : {
  '/api': {
    target: 'http://test.server.com',  // 远程服务域名
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

这样配置的作用相当于在前端页面发了一个url为/api/users/1的异步请求,代理服务器将其转发到了http://test.server.com/api/users/1上,然后返回数据,这样就不会出现跨域的问题,也实现了前后端分离和联调。proxyTable最终会传递到./build/dev-server.js中的express服务中,通过http-proxy-middleware中间件进行使用,详细的配置说明可以访问https://github.com/chimurai/http-proxy-middleware了解。
配置完代理服务器后,我们就可以使用vue-resource来进行数据请求了。通常会把单个资源的数据交互抽象成一个模块,添加到文件夹api中,供各组件调用

需要注意的是,本地和正式上线的后端接口路径尽量保持一致,例如本地访问http://localhost/api/auth/login,线上接口的地址最好也是http://prod.api.com/api/auth/login,这样部署上线后不需要修改/api目录下模块的路径常量,否则可能需要nginx等服务器软件做代理服务。