巩固——Vue中proxyTable代理接口的配置

说明：

proxyTable是vue-cli脚手架在开发模式下，为我们提供的一个跨域的代理中转服务器服务。它是基于http-proxy-middleware插件的。

配置：

找到config文件下的index.js中的 proxyTable ，添加：

proxyTable: {
      '/api': {    
        target: 'http://192.168.8.143:8082/api',  // 接口地址
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': '/'   //需要rewrite的,
        }              
    }
}

// secure: true, // 如果是https接口，需要配置这个参数

// ws: true, // 如果要代理 websockets， 需要配置这个参数

添加好之后，重启项目即可。

进阶：

需要代理的接口较多时，为了方便管理。我们可以在config文件下创建一个proxyConfig.js（代理接口全写这里面），添加：

module.exports = {
    proxy: {
          '/api': {    
              target: 'http://192.168.8.143:8082/api',  // 代理接口
              changeOrigin: true,  //是否跨域
              pathRewrite: {
                  '^/api': '/'   //需要rewrite的,
              }              
          }
    }
  }

然后在index.js中添加：

var proxyConfig = require('./proxyConfig')

并将proxyTable改为

proxyTable: proxyConfig.proxy,

重启项目即可。