Docker Compose 热重载在 Vue.js 应用中无法正常工作

Question

我有一个在docker上运行的vueJS应用程序。

当我通过yarn serve运行应用程序时，它可以正常运行，而且在docker中也是如此。

我的问题是热重载无法正常工作。

我的Dockerfile：

FROM node:12.2.0-alpine

WORKDIR /app
COPY package.json /app/package.json
RUN npm install
RUN npm install @vue/cli -g

CMD ["npm", "run", "serve"]

我的 docker-compose.yml 文件:

version: '3.7'

  services:

    client:
      container_name: client
      build:
        context: .
        dockerfile: Dockerfile
      volumes:
        - '.:/app'
        - '/app/node_modules'
      ports:
        - '8082:8080'

有人能看出我犯了什么错误吗？

- pkberlin

---

Vue.js应用程序使用哪个端口？同时，到处都要使用相同的端口，如8080。 - stchr

默认端口为8080。 - pkberlin

请使用以下代码并尝试端口设置：ports: - '8080:8080' - stchr

一开始尝试了这个，但是它不起作用。 - pkberlin

你使用的是哪个主机操作系统？ - Adiii

实际上这是Windows 10，但我也需要它在我的Mac上运行。 - pkberlin

Answer 1

我找到了解决方案： 我在compose文件中添加了以下内容：

environment: 
  - CHOKIDAR_USEPOLLING=true

- pkberlin

Answer 2

我过去使用的方法是在docker-compose.yml文件中使用以下内容：

  frontend:
    build: 
      context: .
      dockerfile: vuejs.Dockerfile
    # command to start the development server
    command: npm run serve
    # ------------------ #
    volumes:
      - ./frontend:/app
      - /app/node_modules # <---- this enables a much faster start/reload
    ports:
      - "8080:8080"
    environment: 
      - CHOKIDAR_USEPOLLING=true # <---- this enables the hot reloading

- Juan Arroyo Ruiz

---

你能解释一下为什么将node_modules添加为卷会增强启动和重新加载的速度吗？我对这个解释很感兴趣。 - lbris

我有同样的问题，因为这个匿名卷存在是为了在将其复制到容器时不被项目的node_modules覆盖。 - LastM4N

它一直在我这里工作，但现在在我的Windows机器上不再工作，而在我的Linux机器上仍然可以…… :shrug: - lbris

它说“找不到npm命令”。 - Sohail

@Sohail 你应该使用启动开发服务器的命令，这个命令在你的 package.json 文件中有描述。 - undefined

Answer 3

上面的一个答案建议为chokidar轮询设置环境变量。根据this issue，您可以在vue.config.js中将轮询选项设置为true。

module.exports = {
  configureWebpack: {
    devServer: {
      port: 3000,
      // https://github.com/vuejs-templates/webpack/issues/378
      watchOptions: {
        poll: true,
      },
    },
  }
};

此外，请确保您挂载的卷与您的工作目录等正确匹配，以确保文件被正确监视。

- Carlos Soriano

Answer 4

同时暴露8080端口。

FROM node:12.2.0-alpine

EXPOSE 8080 # add this line in docker file.

WORKDIR /app
COPY package.json /app/package.json
RUN npm install
RUN npm install @vue/cli -g

CMD ["npm", "run", "serve"]

Docker compose作为

version: '3.7'

  services:

    client:
      container_name: client
      build:
        context: .
        dockerfile: Dockerfile
      volumes:
        - '.:/app'
        - '/app/node_modules'
      ports:
        - '8080:8080'

服务器将在本地主机的8080端口上运行。

- stchr

---

“不起作用”并不是您试图解决的问题的准确描述。docker-compose logs显示了什么？您正在发出哪个确切的“热重载”命令？当您发出它时，是否有任何相关输出？如果您在Docker文件中将npm替换为手动测试中使用的yarn，会发生什么？是什么症状让您认为应用程序完全关闭了？您能否在浏览器中加载任何内容，还是会拒绝连接？它在第一次运行时提供页面，然后在您进行“热重载”时停止服务吗？... - Zeitounator

它也可以在Dockerfile中不显式地暴露端口8080的情况下工作。在docker-compose文件中提到端口似乎对我来说已经足够了。 - lbris

Answer 5

对我来说，问题出在 Windows + Docker Desktop 上。切换到 WSL2 + Docker Desktop 后，热重载又可以正常工作了，而且不需要额外的工作或变量。

- RogerSik