首页  >  问答  >  正文

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

<p>您好,我的 vue 项目遇到问题。</p> <p>我在 docker 中有前端后端和后端数据库。</p> <p>这是 vue.config.js 配置:</p> <pre class="brush:php;toolbar:false;">module.exports = defineConfig({ configureWebpack: { entry: "./src/main.js", devServer: { hot: true, }, watch: true, watchOptions: { ignored: /node_modules/, poll: 500, }, }, transpileDependencies: true })</pre> <p>容器在创建过程中会自行安装 npm 和 package.json 中给出的包:</p> <pre class="brush:php;toolbar:false;">{ "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" }, “开发依赖项”:{ “@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”, “传单”:“^1.9.3”, “sass”:“^1.32.7”, “sass-loader”:“^12.0.0”, “打字稿”:“~4.5.5” }, “eslintConfig”:{ “根”:正确, “环境”:{ “节点”:真 }, “扩展”:[ “插件:vue/vue3-essential”, “eslint:推荐”, “@vue/typescript/推荐” ], “解析器选项”:{ “ecma版本”:2020 }, “规则”:{} }, “浏览器列表”:[ ”“ 1%”, “最后 2 个版本”, “没有死”, “不是11” ] }</pre> <p>我发布了所有内容,这样就不会造成混乱:)</p> <p>直到昨天,一切对我来说一切都正常,但是今天重新启动容器后,页面的热重新加载选项停止工作。</p> <p>当容器启动时,我得到以下输出:</p>
前端 |   应用程序运行于:
前端|   - 本地:http://localhost:8080/
前端|   - 网络:http://172.26.0.4:8080/
前端|
未发现问题。
<p>当我使用 http://localhost:8080 在浏览器中启动页面时,页面会加载,但保存更改时的实时重新加载选项已停止工作。</p> <p>在控制台中我可以看到浏览器尝试下载更新但没有得到响应</p> <pre class="brush:php;toolbar:false;">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</pre> <p>我尝试从头开始放置容器。</p> <p>我使用了旧版本的 kyod,但在撰写后此选项仍然不起作用</p> <p>当我手动刷新页面时,内容会正确更改。</p> <p>你知道问题出在哪里吗</p> <p>此外,在其他计算机上它也可以正常工作。</p> <p>他们编译整个项目的时间比我晚,所以如果它依赖于某些节点模块,它也将无法工作。 不管怎样,我已经尝试自己从头开始创建容器两天了,所以没有任何node_模块是过时的。 问题不在配置中,因为一天前它还可以工作。 或者我的电脑上是否有某些内容可能会阻止 ws://172.26.0.4:8080/ws 的流量</p> <p>此外,它在其他浏览器上看起来是相同的。</p> <p>我目前正在安装一个虚拟机来检查它仍然像这样,但很想听听关于我还可以检查什么的建议。</p> <p>感谢您的提前互动并期待您!</p>
P粉207483087P粉207483087416 天前571

全部回复(1)我来回复

  • P粉704066087

    P粉7040660872023-08-31 10:19:39

    其他信息:

    这是我的容器检查:

    [
    {
        "Id": "625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e",
        "Created": "2023-04-09T13:30:45.128344216Z",
        "Path": "docker-entrypoint.sh",
        "Args": [
            "npm",
            "run",
            "serve"
        ],
        "State": {
            "Status": "running",
            "Running": true,
            "Paused": false,
            "Restarting": false,
            "OOMKilled": false,
            "Dead": false,
            "Pid": 6155,
            "ExitCode": 0,
            "Error": "",
            "StartedAt": "2023-04-09T13:30:55.597778809Z",
            "FinishedAt": "0001-01-01T00:00:00Z"
        },
        "Image": "sha256:17aa7ddc26c8faa172749252f89ac6e67e53cf104c9aade0ce8f866fd378405e",
        "ResolvConfPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/resolv.conf",
        "HostnamePath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/hostname",
        "HostsPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/hosts",
        "LogPath": "/var/lib/docker/containers/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e/625967de365da0d8b22436d525c8b355a6388b171cbb6065a58b8dce5cf6308e-json.log",
        "Name": "/frontend",
        "RestartCount": 0,
        "Driver": "overlay2",
        "Platform": "linux",
        "MountLabel": "",
        "ProcessLabel": "",
        "AppArmorProfile": "",
        "ExecIDs": null,
        "HostConfig": {
            "Binds": [
                "C:\Users\kubak\Documents\GitHub\yourcar24\frontend:/app:rw"
            ],
            "ContainerIDFile": "",
            "LogConfig": {
                "Type": "json-file",
                "Config": {}
            },
            "NetworkMode": "yourcar24_default",
            "PortBindings": {
                "8080/tcp": [
                    {
                        "HostIp": "",
                        "HostPort": "8080"
                    }
                ]
            },
            "RestartPolicy": {
                "Name": "",
                "MaximumRetryCount": 0
            },
            "AutoRemove": false,
            "VolumeDriver": "",
            "VolumesFrom": null,
            "CapAdd": null,
            "CapDrop": null,
            "CgroupnsMode": "private",
            "Dns": null,
            "DnsOptions": null,
            "DnsSearch": null,
            "ExtraHosts": [],
            "GroupAdd": null,
            "IpcMode": "private",
            "Cgroup": "",
            "Links": null,
            "OomScoreAdj": 0,
            "PidMode": "",
            "Privileged": false,
            "PublishAllPorts": false,
            "ReadonlyRootfs": false,
            "SecurityOpt": null,
            "UTSMode": "",
            "UsernsMode": "",
            "ShmSize": 67108864,
            "Runtime": "runc",
            "ConsoleSize": [
                0,
                0
            ],
            "Isolation": "",
            "CpuShares": 0,
            "Memory": 0,
            "NanoCpus": 0,
            "CgroupParent": "",
            "BlkioWeight": 0,
            "BlkioWeightDevice": null,
            "BlkioDeviceReadBps": null,
            "BlkioDeviceWriteBps": null,
            "BlkioDeviceReadIOps": null,
            "BlkioDeviceWriteIOps": null,
            "CpuPeriod": 0,
            "CpuQuota": 0,
            "CpuRealtimePeriod": 0,
            "CpuRealtimeRuntime": 0,
            "CpusetCpus": "",
            "CpusetMems": "",
            "Devices": null,
            "DeviceCgroupRules": null,
            "DeviceRequests": null,
            "KernelMemory": 0,
            "KernelMemoryTCP": 0,
            "MemoryReservation": 0,
            "MemorySwap": 0,
            "MemorySwappiness": null,
            "OomKillDisable": null,
            "PidsLimit": null,
            "Ulimits": null,
            "CpuCount": 0,
            "CpuPercent": 0,
            "IOMaximumIOps": 0,
            "IOMaximumBandwidth": 0,
            "Mounts": [
                {
                    "Type": "volume",
                    "Target": "/app/node_modules",
                    "VolumeOptions": {}
                }
            ],
            "MaskedPaths": [
                "/proc/asound",
                "/proc/acpi",
                "/proc/kcore",
                "/proc/keys",
                "/proc/latency_stats",
                "/proc/timer_list",
                "/proc/timer_stats",
                "/proc/sched_debug",
                "/proc/scsi",
                "/sys/firmware"
            ],
            "ReadonlyPaths": [
                "/proc/bus",
                "/proc/fs",
                "/proc/irq",
                "/proc/sys",
                "/proc/sysrq-trigger"
            ]
        },
        "GraphDriver": {
            "Data": {
                "LowerDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe-init/diff:/var/lib/docker/overlay2/cd5p9dvr5c7dbcha8dtxbme1m/diff:/var/lib/docker/overlay2/to42q27jjhra2yqc7ir9wj5j2/diff:/var/lib/docker/overlay2/xh0ysmffu4p9v8ftknpf33je9/diff:/var/lib/docker/overlay2/is9l099vfhqmvx05r231znk1n/diff:/var/lib/docker/overlay2/5b1b4bc3f17d76f08c342ddc86f8130386ce811b6458c825f17aafb543ca181a/diff:/var/lib/docker/overlay2/88184b84b65868f1d4734f58ce65ba5d95e275eec17bc5c5c83e4158e54ff75d/diff:/var/lib/docker/overlay2/0f12aa8e3716d8c56fdb0d7fbaab97ccf1bf9a3c1220d54858c3b1ab06be71df/diff:/var/lib/docker/overlay2/6ae91c5d23a1ef5d5e3c6eaa95ccbaa2be5e1b1c7373aa0cebc6fe8598c6c8ef/diff",
                "MergedDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/merged",
                "UpperDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/diff",
                "WorkDir": "/var/lib/docker/overlay2/6673870013c91f39037354420092aa515c9d5cef85f23ebd82550deddafb89fe/work"
            },
            "Name": "overlay2"
        },
        "Mounts": [
            {
                "Type": "bind",
                "Source": "C:\Users\kubak\Documents\GitHub\yourcar24\frontend",
                "Destination": "/app",
                "Mode": "rw",
                "RW": true,
                "Propagation": "rprivate"
            },
            {
                "Type": "volume",
                "Name": "e88cbe5ad0d3e021e966733cf8282771e90fc46bde83ea8fce699526e1b2f960",
                "Source": "/var/lib/docker/volumes/e88cbe5ad0d3e021e966733cf8282771e90fc46bde83ea8fce699526e1b2f960/_data",
                "Destination": "/app/node_modules",
                "Driver": "local",
                "Mode": "z",
                "RW": true,
                "Propagation": ""
            }
        ],
        "Config": {
            "Hostname": "625967de365d",
            "Domainname": "",
            "User": "",
            "AttachStdin": false,
            "AttachStdout": true,
            "AttachStderr": true,
            "ExposedPorts": {
                "8080/tcp": {}
            },
            "Tty": false,
            "OpenStdin": false,
            "StdinOnce": false,
            "Env": [
                "CHOKIDAR_USEPOLLING=true",
                "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
                "NODE_VERSION=19.8.1",
                "YARN_VERSION=1.22.19"
            ],
            "Cmd": [
                "npm",
                "run",
                "serve"
            ],
            "Image": "yourcar24-frontend",
            "Volumes": null,
            "WorkingDir": "/app",
            "Entrypoint": [
                "docker-entrypoint.sh"
            ],
            "OnBuild": null,
            "Labels": {
                "com.docker.compose.config-hash": "758ad9f8455cf7bcbb71af70db99dffaff094db18fc300027e84c7c7732f0322",
                "com.docker.compose.container-number": "1",
                "com.docker.compose.depends_on": "backend:service_started:false",
                "com.docker.compose.image": "sha256:17aa7ddc26c8faa172749252f89ac6e67e53cf104c9aade0ce8f866fd378405e",
                "com.docker.compose.oneoff": "False",
                "com.docker.compose.project": "yourcar24",
                "com.docker.compose.project.config_files": "C:\Users\kubak\Documents\GitHub\yourcar24\docker-compose.yaml",
                "com.docker.compose.project.working_dir": "C:\Users\kubak\Documents\GitHub\yourcar24",
                "com.docker.compose.replace": "6ce5b392b35312a4cf6c570489499d92ce1caac3d7277c180fea31f50be29e62",
                "com.docker.compose.service": "frontend",
                "com.docker.compose.version": "2.17.2"
            }
        },
        "NetworkSettings": {
            "Bridge": "",
            "SandboxID": "e05a105a74ff2f8d8447668bb81fd3fef49328bc033760b0bad3089acc578519",
            "HairpinMode": false,
            "LinkLocalIPv6Address": "",
            "LinkLocalIPv6PrefixLen": 0,
            "Ports": {
                "8080/tcp": [
                    {
                        "HostIp": "0.0.0.0",
                        "HostPort": "8080"
                    }
                ]
            },
            "SandboxKey": "/var/run/docker/netns/e05a105a74ff",
            "SecondaryIPAddresses": null,
            "SecondaryIPv6Addresses": null,
            "EndpointID": "",
            "Gateway": "",
            "GlobalIPv6Address": "",
            "GlobalIPv6PrefixLen": 0,
            "IPAddress": "",
            "IPPrefixLen": 0,
            "IPv6Gateway": "",
            "MacAddress": "",
            "Networks": {
                "yourcar24_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "frontend",
                        "frontend",
                        "625967de365d"
                    ],
                    "NetworkID": "3e68f8d62150de8f8ca5a3f89602cf9b58d7f98a68169e9b5ab8fe3bbbd4a30e",
                    "EndpointID": "9da94224f0fcf2d50edb5998b8824b71c72c52459f081c8801361458b6d3c2b1",
                    "Gateway": "172.19.0.1",
                    "IPAddress": "172.19.0.4",
                    "IPPrefixLen": 16,
                    "IPv6Gateway": "",
                    "GlobalIPv6Address": "",
                    "GlobalIPv6PrefixLen": 0,
                    "MacAddress": "02:42:ac:13:00:04",
                    "DriverOpts": null
                }
            }
        }
    }

    ]

    回复
    0
  • 取消回复