Dockerized Vue 应用程序 - 热重载不起作用

Question

Dockerized Vue 应用程序正常加载到浏览器，当应用对代码的更改时，如果不刷新则不会反映。

Docker 文件

FROM node:14-alpine

# make the 'app' folder the current working directory
WORKDIR /app

# copy 'package.json'
COPY package.json .

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
#COPY . .


EXPOSE 8080

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

docker-compose.yml

version: '3.9'
services:
  frontend:
    container_name: 'frontend'
    build: ./
    stdin_open: true
    tty: true
    ports:
      - '8080:8080'
    volumes:
      - ./:/app
      - /app/node_modules
    environment:
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true

package.json

{
  "name": "project",
  "version": "1.6.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-axios": "^3.2.2",
    "vuetify": "2.3.18",
    "vuex": "^3.6.0",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.10",
    "@vue/cli-plugin-eslint": "^4.5.11",
    "@vue/cli-plugin-router": "^4.5.10",
    "@vue/cli-plugin-unit-jest": "^4.5.10",
    "@vue/cli-plugin-vuex": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "1.1.2",
    "babel-eslint": "^10.1.0",        
    "node-sass": "^5.0.0",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "vuetify-loader": "^1.6.0",
    "webpack": "^4.46.0"
  }
}

当我在本地运行项目时，热重载效果很好！

知道 docker 上的问题是什么吗？

EDIT 由于这是一个 docker 用于开发目的，我也尝试删除 COPY . . 但没有结果。

Answer 1

您的模板看起来非常接近 this Docker Vue Hot-Reload template，效果很好。唯一的区别是 HOST=0.0.0.0 是在上述模板中的 Dockerfile 中设置的。也许重新构建会奏效。

PS: 我创建了这个模板。

Answer 2

很多天后，我设法通过在 webpack 配置文件中添加以下配置来添加热重载：

devServer: {
      public: '0.0.0.0:8080'
    }

在挖掘到官方 vue js repo 之后，特别是 serve.js 文件找到了 public 选项：

specify the public network URL for the HMR client

如果您不想编辑您的 webpack 配置，您可以直接从 docker-compose 文件中执行此命令：

command: npm run serve -- --public 0.0.0.0:8080

Dockerized Vue 应用程序 - 热重载不起作用

Dockerized Vue app - hot reload does not work

docker

vue.js

dockerfile

docker-compose

hot-reload