vue-cli-service 在 docker 中重新加载答案

【问题标题】：vue-cli-service serve reloading in dockervue-cli-service 在 docker 中重新加载
【发布时间】：2020-08-06 02:15:26
【问题描述】：

我正在使用 @vue/cli-service 4.1.0 为我的 vue 应用程序提供服务。在我的主机（Mac Os，Darwin 18.5.0）上使用 vue-cli-service serve 命令运行它时，一切正常。但最近我决定对其进行 docker 化（node:13 是基础镜像，Docker 版本 19.03.5，docker-compose 版本 1.25.2）。我正在使用 docker 和 docker-compose 并在 docker 容器中使用我的源代码创建一个卷，在初始 cmd 之后运行 yarn install && yarn serve。但是在更改 docker 容器之外的任何文件后，vue-cli-service 不会重建我的应用程序。此外，我无法在 Linux 机器或其他 Mac Os 主机上重现此问题。

由于我找不到任何与我的问题相关的内容，我决定在这里询问。

我正在使用以下 nginx 配置来代理所有请求。

server {
        listen 80;
        server_name default;

        location / {
            include proxy_params;
            proxy_http_version 1.1;
            proxy_buffering off;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_pass http://front:8080;
        }
}

【问题讨论】：

如果你把你的代码放在一个命名卷中，Docker 会将其视为用户数据，不能被修改，它会忽略底层镜像的变化。这不适合您的应用程序代码。删除卷规范，并在代码更改时重建映像。
我没有使用命名卷，而是将其挂载到主机系统。
我也有同样的问题。我唯一能想到的是 vue-cli-service 没有注意到文件更改，因为它们来自另一个系统。超级诡异
实际上，为了获得更多证据，似乎即使您从容器内运行 vue-cli-service serve 并在容器内更改文件，它仍然不会接受更改. vue-cli-service 在 linux 和 windows 上的工作方式可能存在问题？

标签： docker vue.js nginx

【解决方案1】：

在我看来，您遇到了热重载功能在 docker 中不起作用的问题？如果是这样，问题可能是端口映射。

看起来您正在将主机端口 8080 映射到容器端口 80。我可能在这里错了，因为这有点难以分辨。

尝试将主机上的 8080 端口映射到容器上的 8080 端口

参考Hot reload not working with webpack-dev-server and docker

【讨论】：