Docker化Vite+Vue3项目热重载失效问题求助

问题根源 #

你当前的Docker配置是生产构建模式，完全不适合开发场景：

• Dockerfile用了多阶段构建，最终把npm run build生成的静态文件放到nginx里运行，这是生产环境的部署方式，根本不会监听代码变化
• 热重载是Vite开发模式的特性，需要运行npm run dev，同时让容器能实时感知本地代码的修改

修复步骤 #

1. 新建开发专用Dockerfile #

创建Dockerfile.dev，专门用于开发环境：

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

注：如果你的Vite配置了自定义端口，记得修改EXPOSE的端口号

2. 更新docker-compose.yml #

调整配置，挂载本地代码并开放热重载所需端口：

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173" # Vite开发服务器端口
      - "24678:24678" # Vite热重载的WebSocket端口
    volumes:
      - .:/app # 把本地代码挂载到容器，实现文件同步
      - /app/node_modules # 避免本地node_modules覆盖容器内的依赖
    environment:
      - NODE_ENV=development

3. 修改vite.config.ts适配容器环境 #

Vite默认只允许本地访问，且Docker文件监听存在兼容性问题，需要添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"

export default defineConfig({
  server: {
    host: '0.0.0.0', // 允许外部访问容器内的Vite服务
    watch: {
      usePolling: true // 解决Docker挂载文件时的监听失效问题
    }
  },
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  }
})

关键说明 #

• 挂载本地目录后，容器内的代码会和本地实时同步，Vite能监听到文件修改
• usePolling: true是因为Docker在Windows/macOS的文件系统下，原生监听机制无法正常工作，轮询模式能确保Vite感知到文件变化
• 开放WebSocket端口是因为Vite的热重载依赖这个端口传输更新信号，不开放的话热重载会失效

内容的提问来源于stack exchange，提问作者Heyran.rs