vue的webpack代理websocket配置

场景： 在前端vue项目中需要使用websocket，同时项目中使用代理的方式进行后端请求。

目前网上几乎没有关于这一块的配置说明资料，本人也就随便记两笔吧，以便后人爬坑有所依靠。哈哈 有用记得点赞！

1 在项目的config/index.js文件中的dev参数下增加代理配置：

dev: {
   proxyTable: {
      '/socket': {
        target: 'ws://localhost:8000',//后端目标接口地址
        changeOrigin: true,//是否允许跨域
        pathRewrite: {
          '^/socket': '',//重写,
        },
        ws: true //开启ws, 如果是http代理此处可以不用设置
      }
    },

 。。。
}

2 在vue的初始化websocket连接处的uri写法：

此处的uri的写法 'ws://' + location.host + '/socket/websocket/' + id 。

//此处因已将websocket添加到vue中所以通过this.$connect()方法创建websocket连接
this.$connect('ws://' + location.host + '/socket/websocket/' + id + '/' + cn, { format: 'json' })

需要注意几点：
     a、此处uri前面必须加ws://前缀

     b、uri的前缀后面必须是location.host，表示ws访问当前前端项目的地址，而不能只写代理的key值‘/socket’ 或其他地址端口

     c、在location.host后面紧跟的是代理key值，与第1步中定义的key一致‘/socket’

     d、地址中其他部分为后端api的uri

3、后端websocket的server类

@ServerEndpoint("/websocket/{userId}/{cn}")
@Component
public class WebSocketServer {

    。。。此处代码省略，网上一大把
}

可能出现的异常：

Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://localhost/socket/xxx' is invalid.

出现上述异常 或类似异常的，基本可以确定是URL配置错误。导致上面的错误其实就是uri中：ws://localhost/....与系统前端访问地址不一致导致代理失败（或代理未生效），此处必须加ws:// 以及 与前端访问地址端口一致，见第2步中正确写法