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

Question

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

Dockerfile

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 可能出现什么问题吗？

编辑由于这是一个用于开发目的的泊坞窗，我也尝试删除但COPY . .没有结果。

Answer 1

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

devServer: {
      public: '0.0.0.0:8080'
    }

在深入研究官方 vue js 存储库后，特别是在serve.js文件中找到了public以下选项：

指定HMR客户端的公网URL

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

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

Answer 2

该问题也可能出现在您的 vue.config.js 文件中。

    module.exports = defineConfig({
        configureWebpack: {
            entry: "./src/main.js",
            devServer: {
                hot: true,
            },
            watch: true,
            watchOptions: {
                ignored: /node_modules/,
                poll: 1000,
            },
        },
        transpileDependencies: true,
    });