如何更改 vue-cli 热重载端点（sockjs）的主机？

Question

我有什么：

• vue-cli 在虚拟机中运行的应用程序 (vue --version 3.7.0)
• Laravel Homestead v8.3.2
• 流浪者 2.2.4
• 虚拟盒子
• Nginx

vue.config.js:

module.exports = {
  devServer: {
    host: 'myvueapp.local',
    https: true
  }
}

Nginx 配置：

server {
    listen 80;
    listen 443 ssl http2;
    server_name .myvueapp.local;
    root "/home/path/to/myvueapp.local/public";

    index index.html index.htm;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html =404;
        proxy_pass https://myvueapp.local:8080;
    }

    sendfile off;
}

npm run serve 输出：

Local: https://myvueapp.local:8080/
Network: https://myvueapp.local:8080/

我该怎么办：

我在我的虚拟机中运行npm run serve。我可以通过浏览器中的myvueapp.local 从我的主机访问 Vue 应用程序。

我的问题是什么：

热重载不起作用。 sockjs 连接调用的不是myvueapp.local，而是myvueapp.local:8080。所以，我得到了

https://myvueapp.local:8080/sockjs-node/info?t= 网络::ERR_CONNECTION_REFUSED

Answer 1

您的 devServer 上需要一个公共属性，例如 this

然后，热重载将在回退（http 轮询）模式下工作，但要使 websockets 正常工作，您需要在代理服务器中处理升级请求。 Here 是一个解决快递问题的脚本。您需要将其移植到 nginx。这只是关于您缺少的升级请求的最后一部分。