当我们前端使用mqtt来实现实时数据通信的时候，我们不想在代码里写死MQTT的IP地址。

这时候我们可以像普通HTTP接口一样通过代理来解决。

本文中服务端的mqtt地址为: ws://xxx.xxx.1.237:61614

注意: 前端使用的话，要求服务端开通ws的使用方式，因为前端不能使用mqtt://，这是TCP的方式。而我们前端只能使用ws的方式，ws://开头。

1. 本地开发环境通过vue.config.js配置

这个是我们代码中请求mqtt的地址。

    const connectUrl = `ws://${location.host}/mqtt

在vue.config.js中，我们这样配置

    devServer: {
       "/mqtt": {
        target: "ws://xxx.xxx.1.237:61614",
        ws: true,    // 开启websocket代理
        changeOrigin: true,
      }, 
    }

这时候，我们看一下效果，status状态码为101，正常运行

2. 线上环境通过nginx代理来配置

下面是服务器上的nginx配置

 server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
 
        # 这块用来配置mqtt代理服务
        # proxy_http_version 代理时使用的http版本
        location /mqtt {
           proxy_pass http://xxx.xxx.1.237:61614/mqtt;
           proxy_http_version 1.1;  
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "Upgrade";
        }
  }

我这边使用的nginx版本为1.20.0，这样配置是没有问题的。

结尾：好了，关于前端开发中使用mqtt时，实现动态代理IP的问题到这里就说的差不多了。有问题的，欢迎各位大佬评论区指出。码字不易，家人们点个赞再走吧！！！