Docker部署Vue项目Hot Reload失效问题求助

基于Docker部署的Vue前后端+数据库项目，此前Hot Reload功能正常，重启容器后失效。具体表现：

• 通过http://localhost:8080访问页面正常，但修改代码保存后无热更新响应
• 浏览器控制台报错：WebSocket connection to 'ws://172.26.0.4:8080/ws' failed:
• 手动刷新页面可显示修改内容，且该项目在其他电脑上运行正常
• 已尝试重新构建容器、使用旧版本镜像，问题依旧

相关配置及日志如下：

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 #

{
  "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.

• 修正devServer配置，指定WebSocket地址
  修改vue.config.js中的devServer配置，强制WebSocket使用宿主机地址，避免容器内部IP被前端使用：

  module.exports = defineConfig({
    configureWebpack: {
      entry: "./src/main.js",
      devServer: {
        hot: true,
        host: '0.0.0.0', // 让服务监听容器所有网卡，确保外部可访问
        public: 'localhost:8080', // 指定前端使用的公网地址，覆盖容器内部IP
        client: {
          webSocketURL: 'ws://localhost:8080/ws' // 强制指定WebSocket连接地址
        }
      },
      watch: true,
      watchOptions: {
          ignored: /node_modules/,
          poll: 500,
      },
  },
    transpileDependencies: true
  })
  

• 检查Docker端口映射完整性
  确认容器启动命令中已正确映射8080端口，确保WebSocket流量能通过宿主机端口转发到容器：

  docker run -p 8080:8080 <你的镜像名>
  

• 排查本地网络拦截
  临时关闭本地防火墙、杀毒软件、代理工具（如VPN、浏览器代理插件），重新测试Hot Reload功能，确认是否是本地工具拦截了ws://172.26.0.4:8080/ws的流量。

• 验证容器内部WebSocket服务状态
  进入容器内部，测试WebSocket服务是否正常运行：

  1. 进入容器：docker exec -it <容器名称/ID> bash
  2. 安装wscat：npm install -g wscat
  3. 连接WebSocket：wscat -c ws://localhost:8080/ws
     如果能成功连接，说明容器内部服务正常，问题出在外部网络转发或本地拦截。

• 确认文件挂载权限
  检查宿主机代码目录是否正确挂载到容器内，且容器拥有目录的读写权限：
  例如启动命令中挂载src目录：

  docker run -v $(pwd)/src:/app/src -p 8080:8080 <你的镜像名>
  

  可进入容器执行ls -l /app/src确认文件权限。

内容的提问来源于stack exchange，提问作者Jakub Kosmal