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

这篇具有很好参考价值的文章主要介绍了解决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发起通信。

文章来源地址https://www.toymoban.com/news/detail-407465.html

到了这里，关于解决vue问题WebSocketClient.js?5586:16 WebSocket connection to ‘ws://x.x.x.60:8081/ws‘ failed的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！