Vitejs：由于 HMR 原因，WebSocket 与 'wss：//host：port/' 的连接失败

Question

我用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'
}
}

package.json:

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

我不明白为什么它仍然使用HMR，因为我禁用了它。我怎样才能解决这个问题呢?我也试过server.hmr.clientPort: 443，但它也没有工作。

只要禁用hmr就足够了。

Answer 1

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

如果它在生产环境中刷新，则转到public文件夹并找到一个名为.hot的文件。删除那个文件，一切都会好起来的。