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

Question

Dockerized Vue 应用程序正常加载到浏览器，当对代码应用更改时，如果不刷新则不会反射(reflect)出来。

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

包.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

许多天后，我设法通过在 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