WebSocket connection to ‘ws://10.151.2.241:8080/ws‘ failed:

在vue3项目中出现以下错误

这个错误表明在尝试建立到 'ws://10.151.18.185:8080/ws' 的WebSocket连接时失败了。WebSocket是一种用于实现双向通信的协议，这种错误通常发生在以下情况下：

1. 服务器不可达：可能服务器 '10.151.18.185' 不可用，或者WebSocket服务未正确配置。确保服务器正在运行，并且WebSocket服务正在监听指定的端口（8080）。

2. 网络问题：这种错误也可能由于网络问题导致，比如防火墙阻止了WebSocket连接，或者存在网络配置问题。

3. 不正确的WebSocket地址：请确保你正在使用正确的WebSocket地址，包括正确的协议（通常是 'ws://' 或 'wss://'），主机名（IP地址或域名）和端口号。

4. 服务器端问题：另一个可能性是WebSocket服务器端的问题。它可能无法处理连接请求或存在其他配置问题。

---

为了解决这个问题，你可以执行以下步骤：

- 确保服务器正常运行，WebSocket服务正在监听正确的端口，并且没有防火墙或网络配置问题。
- 检查你的客户端代码，确保它正确指向WebSocket服务器地址。
- 查看服务器端的日志以获取更多信息，可能有关于为何连接失败的信息。
- 在可能的情况下，尝试使用不同的WebSocket库或客户端，以确定问题是由库的问题还是服务器问题引起的。

---

如何是项目长时间不用，只需重启项目即可，如果不行则执行以下步骤

在vue3项目中，可以在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
})
module.exports = {
  lintOnSave: false,
}

这段代码添加了一些 devServer 的配置选项，以及修改了 lintOnSave 选项的值。

具体来说，这段代码的作用如下：

1. 设置开发服务器（devServer）的配置选项：
        将开发服务器的主机（host）设置为 '0.0.0.0'，使得该开发服务器可以通过任何可用的网络接口访问，而不仅仅是 localhost。
        将开发服务器的端口（port）设置为 6103。
        配置开发服务器的客户端选项，设置 WebSocket 的 URL 为 'ws://0.0.0.0:6103/ws'。
        设置开发服务器的响应头，允许跨域资源共享，允许所有来源的请求访问。

2. 设置 transpileDependencies选项为 true，这将对所有依赖项进行转译，确保它们在构建时能够正常工作。这在一些情况下是必要的，例如当你使用一些 ES6+ 特性但目标环境不支持时，或者使用了一些第三方库需要进行转译。

3. 修改了 lintOnSave选项的值为 false，这意味着在保存文件时不会触发 ESLint 检查。通常情况下，开发过程中你可能希望 ESLint 在保存文件时进行检查以确保代码质量，但在某些情况下，你可能会选择禁用它。

然后重启项目即可