首先是连接的资源包插件 为

stompjs

然后说一下连接的简要的流程（可以查到很多），通过stop创建一个连接，

let client = Stomp.client("mqURL")

然后登陆mq的服务

 client.connect('用户名', '密码', () => {
            console.log('登录成功');
        }, () => {
            console.log('登录失败');
        }, '/');

 

在登陆成功后进行监听创建好的mq队列

 this.Socket = client.subscribe("消息路由", (res) => {
                            console.log(JSON.parse(res.body));
                        }
                    );

大概就是这个流程，具体的配置参数自行官网吧。

然后说一下封装的思路，封装时创建了一个util和vuex中的socketReady变量；

1、util文件中引用Stomp并创建连接，登陆mq，登陆成功后改变vuex中 socketReady 状态；

2、vuex中的socketReady变量的作用：方便子页面监听mq登陆成功时机，也不必重新登陆mq服务，只需监听mq消息路由即可；

下面为完成代码，按需粘贴

utils/websocket.js

import Stomp from 'stompjs'
import store from '../store'

let client = null;

export function connectWs() {
    return new Promise((resolve, reject) => {
        if (typeof WebSocket == 'undefined') {
            alert('不支持websocket,请联系管理员！')
            reject();
        }
        client = Stomp.client(window.socketURL);
        client.debug = null;
        // 连接RabbitMQ  
        client.connect('用户名', '密码', () => {
            console.log('登录成功');
            store.commit("SET_SOCKET_STATE", true);
            resolve();
        }, () => {
            console.log('登录失败');
            reject()
        }, '/');
    })
}


export {client}

登陆成功后（可在拦截器中登陆，或在首页登陆），如不需要登陆，在页面加载调用即可

import {connectWs, client} from "@/utils/websocket"; 

connectWs().then(() => {
                this.socket= client.subscribe("路由", (res) => {
                        console.log(JSON.parse(res.body));
                    }
                );
            });

子页面使用（计算属性+监听登陆成功后）

 computed: {
            socektReady() {
                return this.$store.state.socektReady
            }
},
 watch: {
           
            socektReady(val) {
                if (val) {
                    //监听队列里面得消息
                    this.zjSocket = client.subscribe("消息路由", (res) => {
                            console.log(JSON.parse(res.body));
                        }
                    );
                }
            }
        },

至于怎么搭建rabbitmq服务，了解甚微，都是度娘，过程不是很复杂，创建消息队列也不是很复杂（路由类型：fadeout）

欢迎评论指导