Vitejs:WebSocket 连接到 'wss://host:port/' 由于 HMR 而失败

我使用 Docker 和 Kubernetes 部署了一个 Vue 页面,它正在运行。但是,即使我禁用了 HMR,Vite 也会在出错后不断刷新:

WebSocket 连接到 'wss://dashboard.default.io:8181/' 失败:

[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:

"dependencies": {
    "yarn": "^1.22.18"
}
"devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "vite": "^2.5.1",
}

我无法弄清楚为什么它仍在使用 HMR,因为我禁用了它。而且,我该如何解决这个问题?我也试过 server.hmr.clientPort: 443 但它也没有用。

只禁用 hmr 就足够了。

stack overflow Vitejs: WebSocket connection to 'wss://host:port/' failed due to HMR
原文答案

答案:

作者头像

我在生产中的 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