解决vue问题WebSocketClient.js?5586:16 WebSocket connection to ‘ws://x.x.x.60:8081/ws‘ failed

创建一个新的项目的时候，使用vue-cli创建。

安装vue-cli

npm install -g @vue/cli

vue-cli文档

创建好之后，运行npm run serve,会启动一个基于express的服务器，就可以热重载代码了，不会手动刷新去查看修改后的代码，很方便。

原理是在运行vue前端代码的时候，服务器还会运行一个websocketClient,与服务器通信。如果检查到代码有修改，就会刷新页面。 如果websocket通信有问题是不会正常进行热重载的。

因为我是直接在测试服务器上做修改，查看的。但是这里有一个问题，在服务器上，vue-cli-servece 不能正常检测到公网ip，而是直接使用了局域网的ip。这就导致ws的域名是内网ip,websocket通信失败。得到这样的错误提示：WebSocketClient.js?5586:16 WebSocket connection to 'ws://x.x.x.60:8080/ws' failed:

网上搜索了很久，没有看到相关的配置要怎么改这个ws的ip地址。但是其中有一篇文件给了提示，可以查看vue-cli-server的原代码，直接修改模块的代码。我没有找到vue-cli-server的代码，但是找到了webpack-dev-server的代码，在node_moudles目录下。  其中lib/options.json 里写了各个配置项的详细信息。 在其中也找到了对应的文档链接地址：  DevServer | webpackwebpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.https://webpack.js.org/configuration/dev-server/#devserverclient

那么这个就简单了，直接修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
      host: '0.0.0.0',
    // https:true,
      port: 6103,
      client: {
        webSocketURL: 'ws://0.0.0.0:6103/ws',
      },
      headers: {
        'Access-Control-Allow-Origin': '*',
      }
  },
  
  transpileDependencies: true
})

其中关键的就是client配置项。修改后，websocketClient可以正常使用公网ip发起通信。