Vue localhost 中查看 proxy 后的实际访问IP地址

1.前言

在使用vue-cli脚手架时，我们为了做到本地跨域会设置proxy达到跨域调用的效果，但是不方便查看实际调用IP地址，这个时候就需要logLevel属性了。

2.基本配置

vue.config.js

devServer: {
    
    
 proxy: {
    
    
    "/api": {
    
    
      target: "https://localhost:8080", // 目标
      changeOrigin: true, // 允许跨域
      pathRewrite: {
    
     // 重写地址
        "^/api": ""
      },
      "logLevel": "debug" // 打印日志
    }
  }
}

3.logLevel是什么？

老实说我也不是很清楚，查了很多资料，基本都是你抄我的我复制你的，没有一个人能说明白。

个人觉得它像是一个第三方插件，有的时候设置logLevel属性并不生效，可能是需要安装，可能是vue-cli版本问题，查了很多资料没查到，以后查到再解释吧。

4.logLevel不生效怎么办？可以手动设置

手动设置

proxy: {
    
    
  '/api': {
    
    
    target: 'http://***.***.***.204:30080',
    pathRewrite: {
    
    '^/api': ''},
    changeOrigin: true,
    logLevel: 'debug',
    onProxyReq: (proxyReq, req) => {
    
    
      // http请求
      console.log('[HPM] %s %s %s %s', req.method, req.originalUrl, '->', req.url);
    },
    onProxyReqWs(proxyReq, req, socket, options, head) {
    
    
      // websocket请求（单个TCP连接上进行全双工通信的协议）
      console.log('[HPM] %s %s %s %s', req.method, '-', req.url);
    }
  },
}

结束。