Docker 기반 Vue 프로젝트의 핫 리로딩
<p>안녕하세요, vue 프로젝트에 문제가 있습니다. </p>
<p>Docker에 프런트엔드 백엔드와 백엔드 데이터베이스가 있습니다.</p>
<p>这是 vue.config.js 配置：</p>
<pre class="brush:php;toolbar:false;">module.exports = 정의구성({
구성웹팩: {
항목: "./src/main.js",
개발자서버: {
뜨겁다 : 사실,
},
시계: 사실,
watch옵션: {
무시됨: /node_modules/,
여론조사: 500,
},
},
transpileDependency: true
})</pre>
<p>容器는 创建过程中会自行安装 npm과 package.json의 中给出的包：</p>
<pre class="brush:php;toolbar:false;">{
"이름": "프론트엔드",
"버전": "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이 아닙니다"
]
}</pre>
<p>我发布了所有内容，这样就不会造成混乱:)</p>
<p>直到昨天，一切道对我来说一切正常，但今天常，但今后，页side熭载选项停止工業。</p>
<p>当容器启动时，我得到以下输流：</p>
<pre class="brush:php;toolbar:false;">프론트엔드 | 앱 실행 위치:
프론트엔드 | - 로컬: http://localhost:8080/
프론트엔드 | - 네트워크: http://172.26.0.4:8080/
프론트엔드 |
문제가 발견되지 않았습니다.</pre>
<p>저희는 http://localhost:8080 에서 浏览器中启动页face时，页face会加载，但保存更改时的实时载选项已停止工时에 http://localhost:8080을 사용합니다.</p>
<p>콘솔에서 브라우저가 업데이트를 다운로드하려고 시도하지만 응답을 받지 못하는 것을 볼 수 있습니다</p>
<pre class="brush:php;toolbar:false;">'ws://172.26.0.4:8080/ws'에 대한 WebSocket 연결 실패:
WebSocketClient @WebSocketClient.js?5586:16
initSocket@socket.js?d6e0:24
eval @socket.js?d6e0:48</pre>
<p>컨테이너를 처음부터 배치해 보았습니다. </p>
<p>이전 버전의 kyod를 사용하고 있는데 이 옵션을 작성한 후에도 여전히 작동하지 않습니다</p>
<p>페이지를 수동으로 새로 고치면 콘텐츠가 올바르게 변경됩니다. </p>
<p>문제가 무엇인지 아시나요</p>
<p>또한 다른 컴퓨터에서도 잘 작동합니다. </p>
<p>그들이 나보다 나중에 전체 프로젝트를 컴파일했기 때문에 일부 노드 모듈에 의존하는 경우에도 작동하지 않습니다.
어쨌든 이틀 동안 처음부터 컨테이너를 직접 만들려고 노력했기 때문에 node_modules 중 오래된 것이 하나도 없습니다.
문제는 하루 전에 작동했기 때문에 구성에 없습니다.
아니면 내 컴퓨터에 ws://172.26.0.4:8080/ws</p>
<p>또한 다른 브라우저에서도 동일하게 보입니다. </p>
<p>현재 확인하기 위해 가상 머신을 설정하고 있는데 여전히 이렇게 보입니다. 하지만 확인할 수 있는 다른 항목에 대한 제안을 듣고 싶습니다. </p>
<p>초창기부터 연락주셔서 감사드리며, 만나 뵙기를 기대하겠습니다! </p>
