Docker 기반 Vue 프로젝트의 핫 리로딩

Question

안녕하세요, vue 프로젝트에 문제가 있습니다.

Docker에 프런트엔드 백엔드와 백엔드 데이터베이스가 있습니다.

这是 vue.config.js 配置：

module.exports = 정의구성({
  구성웹팩: {
    항목: "./src/main.js",
    개발자서버: {
      뜨겁다 : 사실,
    },
    시계: 사실,
    watch옵션: {
        무시됨: /node_modules/,
        여론조사: 500,
    },
},
  transpileDependency: true
})

容器는 创建过程中会自行安装 npm과 package.json의 中给出的包：

{
  "이름": "프론트엔드",
  "버전": "0.1.0",
  "비공개": 사실,
  "스크립트": {
    "serve": "vue-cli-service 서브",
    "빌드": "vue-cli-service 빌드",
    "lint": "vue-cli-service lint"
  },
  "종속성": {
    "@morioh/v-smooth-scrollbar": "^1.0.3",
    "@vuepic/vue-datepicker": "^4.2.0",
    "@vueuse/core": "^9.13.0",
    "아약스": "^0.0.4",
    "축": "^1.3.3",
    "core-js": "^3.8.3",
    "미트": "^3.0.0",
    "등록-서비스-작업자": "^1.7.2",
    "smoothscroll-polyfill": "^0.4.4",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
    "vue-class-composite": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependency": {
    "@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",
    "에슬린트": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "전단지": "^1.9.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "루트": 사실,
    "환경": {
      "노드": 참
    },
    "확장": [
      "플러그인:vue/vue3-essential",
      "eslint:권장",
      "@vue/typescript/recommended"
    ],
    "파서 옵션": {
      "ecma버전": 2020
    },
    "규칙": {}
  },
  "브라우저 목록": [
    "> 1%',
    "최근 2개 버전",
    "죽지 않았다",
    "즉 11이 아닙니다"
  ]
}

我发布了所有内容，这样就不会造成混乱:)

直到昨天，一切道对我来说一切正常，但今天常，但今后，页side熭载选项停止工業。

当容器启动时，我得到以下输流：

프론트엔드 |   앱 실행 위치:
프론트엔드 |   - 로컬: http://localhost:8080/
프론트엔드 |   - 네트워크: http://172.26.0.4:8080/
프론트엔드 |
문제가 발견되지 않았습니다.

저희는 http://localhost:8080 에서 浏览器中启动页face时，页face会加载，但保存更改时的实时载选项已停止工时에 http://localhost:8080을 사용합니다.

콘솔에서 브라우저가 업데이트를 다운로드하려고 시도하지만 응답을 받지 못하는 것을 볼 수 있습니다

'ws://172.26.0.4:8080/ws'에 대한 WebSocket 연결 실패:
WebSocketClient @WebSocketClient.js?5586:16
initSocket@socket.js?d6e0:24
eval @socket.js?d6e0:48

컨테이너를 처음부터 배치해 보았습니다.

이전 버전의 kyod를 사용하고 있는데 이 옵션을 작성한 후에도 여전히 작동하지 않습니다

페이지를 수동으로 새로 고치면 콘텐츠가 올바르게 변경됩니다.

문제가 무엇인지 아시나요

또한 다른 컴퓨터에서도 잘 작동합니다.

그들이 나보다 나중에 전체 프로젝트를 컴파일했기 때문에 일부 노드 모듈에 의존하는 경우에도 작동하지 않습니다. 어쨌든 이틀 동안 처음부터 컨테이너를 직접 만들려고 노력했기 때문에 node_modules 중 오래된 것이 하나도 없습니다. 문제는 하루 전에 작동했기 때문에 구성에 없습니다. 아니면 내 컴퓨터에 ws://172.26.0.4:8080/ws

또한 다른 브라우저에서도 동일하게 보입니다.

현재 확인하기 위해 가상 머신을 설정하고 있는데 여전히 이렇게 보입니다. 하지만 확인할 수 있는 다른 항목에 대한 제안을 듣고 싶습니다.

초창기부터 연락주셔서 감사드리며, 만나 뵙기를 기대하겠습니다!

Answer 1

기타 정보:

내 컨테이너 확인은 다음과 같습니다.

으아악

]