创建一个新的项目的时候，使用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发起通信。?

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。