在基于 docker 的 Vue 项目中热重载

Question

嗨，我的 vue 项目有问题。

我在 docker 中有前端后端和 Db 后端。

这是vue.config.js配置：

module.exports = defineConfig({
  configureWebpack: {
    entry: "./src/main.js",
    devServer: {
      hot: true,
    },
    watch: true,
    watchOptions: {
        ignored: /node_modules/,
        poll: 500,
    },
},
  transpileDependencies: true
})

创建期间的容器自行安装 package.json 中给出的 npm 和包：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@morioh/v-smooth-scrollbar": "^1.0.3",
    "@vuepic/vue-datepicker": "^4.2.0",
    "@vueuse/core": "^9.13.0",
    "ajax": "^0.0.4",
    "axios": "^1.3.3",
    "core-js": "^3.8.3",
    "mitt": "^3.0.0",
    "register-service-worker": "^1.7.2",
    "smoothscroll-polyfill": "^0.4.4",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue-leaflet/vue-leaflet": "^0.8.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "leaflet": "^1.9.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

我发布了所有内容，所以没有混淆 :)

直到昨天一切都对我来说一切正常，但今天在重新启动容器后，页面的热重载选项停止工作。

当容器启动时，我得到这个输出：

frontend    |   App running at:
frontend    |   - Local:   http://localhost:8080/
frontend    |   - Network: http://172.26.0.4:8080/
frontend    |
No issues found.

当我使用 http://localhost:8080 在浏览器中启动页面时，页面会加载，但是当我从更改中保存时，实时重新加载选项已停止工作。

在控制台中，我可以看到浏览器尝试下载更新但没有任何响应

WebSocket connection to 'ws://172.26.0.4:8080/ws' failed: 
WebSocketClient @ WebSocketClient.js?5586:16
initSocket @ socket.js?d6e0:24
eval @ socket.js?d6e0:48

我试着从头开始搭建容器。

我使用了旧版本的 kyod，但在 compose up 之后这个选项仍然不起作用

当我手动刷新页面时，内容会正确更改。

你知道错在哪里吗

此外，在其他计算机上它可以正常工作。

他们比我晚编译了整个项目，所以如果它依赖于一些节点模块，它也不会工作。 无论如何，我已经尝试自己从头开始创建容器 2 天了，所以没有 node_ 模块过时。 问题不在配置中，因为一天前它还在工作。 或者我的电脑上有什么东西可能会阻止到 ws://172.26.0.4:8080/ws 的流量

此外，它在其他浏览器上看起来是一样的。

我目前正在建立一个虚拟机来检查它仍然像这样，但很想听听关于我还能检查什么的建议。

感谢您的提前互动，期待您的光临！