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

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐