如何让Docker化的Vue3+Vite项目实现热重载

问题根源 #

你当前的Docker配置是生产构建模式：通过多阶段构建打包静态文件后用Nginx托管，既没有运行Vite开发服务器，也没有挂载本地代码目录，本地修改无法同步到容器，自然无法触发热重载。要实现开发阶段的热重载，需要单独配置开发环境的Docker工作流。

步骤1：创建开发专用Dockerfile #

在docker目录下新建Dockerfile.dev，内容如下：

FROM node:lts-alpine
WORKDIR /app

# 先复制依赖文件，利用Docker缓存避免每次改代码都重装依赖
COPY package*.json ./
RUN npm install

# 暴露Vite默认开发端口
EXPOSE 5173

# 启动Vite开发服务器
CMD ["npm", "run", "dev"]

步骤2：修改docker-compose.yml，支持开发环境 #

更新docker-compose.yml，添加开发服务配置（可保留生产服务做区分）：

services:
  # 开发环境服务
  web-dev:
    build:
      context: .
      dockerfile: docker/Dockerfile.dev
    ports:
      - "5173:5173"
    volumes:
      # 挂载本地项目目录到容器，实时同步代码修改
      - ./:/app
      # 避免本地目录覆盖容器内安装的node_modules
      - /app/node_modules
    environment:
      - NODE_ENV=development

  # 保留原生产环境服务（可选）
  web-prod:
    build:
      context: .
      dockerfile: docker/Dockerfile
    ports:
      - "8080:80"

步骤3：调整vite.config.ts配置 #

修改配置以支持容器内的热重载检测和外部访问：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url' // 补充缺失的模块导入

export default defineConfig({
  transpileDependencies: true,
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    // 允许容器外部访问开发服务器
    host: '0.0.0.0',
    // 开启文件轮询，解决容器内无法检测本地文件变更的问题
    watch: {
      usePolling: true
    }
  }
})

步骤4：启动开发环境 #

执行以下命令启动开发服务：

docker-compose up web-dev -d

现在访问localhost:5173，修改本地代码后就能看到实时热重载效果了。

关键说明 #

• 代码挂载：通过volumes把本地项目目录挂载到容器，确保修改实时同步；同时用/app/node_modules避免本地目录覆盖容器内的依赖，保持依赖安装在容器内，规避环境差异。
• 文件轮询：容器内的文件系统通常不支持宿主机的文件变更通知，开启usePolling: true让Vite主动轮询文件变化，触发热重载。
• 开发服务器配置：host: 0.0.0.0允许容器外的宿主机访问开发服务器，否则只能在容器内部访问。

内容的提问来源于stack exchange，提问作者bartz