Vitejs：由于 HMR，与“wss://host:port/”的 WebSocket 连接失败

Question

我使用 Docker 和 Kubernetes 部署了一个 Vue 页面，它正在运行。然而，即使我禁用了 HMR，Vite 仍然会在出错后刷新：

与“wss://dashboard.default.io:8181/”的 WebSocket 连接失败：

[vite] 服务器连接丢失。轮询重新启动...

Dockerfile：

FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" ]

yarn dev调用vite命令

vite.config.js：

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: false
  }
})

vue.config.js：

module.exports = {
    devServer: {
      proxy: 'https://backend.default.io'
    }
  }

包.json：

FROM node:16-alpine3.14
WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 8181
CMD [ "yarn", "dev","--host", "--port", "8181" ]

我不明白为什么它仍然使用 HMR，因为我禁用了它。而且，我该如何解决这个问题？我也尝试过server.hmr.clientPort: 443，但也没有成功。

只需禁用 hmr 就足够了。

Answer 1

我在生产中的 Laravel Inertia-Vue js 应用程序中遇到了同样的问题。我通过将以下服务器配置添加到 vite.config.js 解决了这个问题。

export default defineConfig({
plugins: [
   ...
],
server: {
    port: 3000,
    https: true,
    hmr: {
        host: "yourdomainname.com",
        port: 3001,
        protocol: "wss",
    },
},

});

更多信息请参考此链接：https://github.com/vitejs/vite/pull/1926

update 如果在生产时刷新，请转到该public文件夹​​并找到名为 .update 的文件.hot。删除该文件，一切都会正常进行。