vue3 websocket 链接失败

vue3 不管怎么样尝试都无法链接websocket,我确定服务器是开启了的,地址正确,但是就是无法访问
可是我在浏览器控制台中却能够轻松的链接上,我该如何处理
vue3代码

<template>
  <div class="room">
    <el-button @click="openwebsocket">打开链接</el-button>
    <el-button @click="closewebsocket">关闭链接</el-button>
    <el-button @click="haveFood">发送数据</el-button>
  </div>
</template>

<script>
// import websockets from "@/assets/js/websocket";

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "index",
  data() {
    return {
      // websocket 链接对象
      socketServe: null,
      socketurl: 'ws://192.168.2.2:8000/ws',

    }
  },
  created() {

    // //页面销毁时关闭长连接
    // window.addEventListener("beforeunload ", () => {
    //   this.socketServe.websocketclose();
    // });
  },
  mounted() {

  },

  unmounted() {
    // this.socketServe.websocketclose();
  },
  methods: {
    openwebsocket() {
      this.socketServe =new WebSocket(this.socketurl)
    }
  },
}
</script>

<style scoped lang="less">
.room {
  width: 100%;
  height: 100%;
  background: blue;
}
</style>

这是vue页面打开websocket是报错截图

但是我在控制台手动链接却能够收发消息

https://blog.csdn.net/weixin_42433970/article/details/100653124

两个链接的地址不一样啊。控制台能链接证明代码是没有问题的。唯一的区别就是链接地址

Vue.config.js配置了代理么？