Vite + Rails项目热重载失效且编译缓慢问题求助

1. Docker容器内缺少前端依赖安装步骤 #

你的Dockerfile仅安装了Ruby和Rails依赖，但未安装Vite及相关前端插件的npm依赖。容器内缺少必要的编译环境，会导致每次启动都要临时处理依赖，直接拖慢编译速度，甚至引发热重载异常。

修复方法：
修改Dockerfile，先复制前端依赖配置文件，安装npm包后再复制完整代码：

FROM ruby:3.3

RUN apt-get update -qq && apt-get install -y build-essential apt-utils libpq-dev nodejs npm

# 先复制前端依赖配置，缓存依赖层
COPY package*.json /app/
WORKDIR /app
RUN npm install

# 再复制项目代码
COPY . .

RUN gem install bundler rails && bundle install

CMD rm tmp/pids/server.pid && rails s -b 0.0.0.0

2. Vite Dev Server未配置容器可访问的Host与端口映射 #

Vite默认使用localhost作为服务地址，且占用5173端口，但Docker容器内的服务默认无法被外部访问，同时你的docker-compose.yml仅映射了Rails的3000端口，导致浏览器无法连接Vite的热重载WebSocket服务，最终热重载失效。

修复方法：

1. 修改vite.config.js，添加Vite服务的Host与文件监听配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue(),
    // 移除FullReload插件，原因见下文
  ],
  server: {
    host: '0.0.0.0', // 允许容器外部访问
    watch: {
      usePolling: true, // 解决Docker容器内文件变化监听失效问题
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./app/frontend/internal', import.meta.url)),
    },
  },
})

2. 更新docker-compose.yml，添加Vite端口映射：

services:
  db:
    image: postgres
    env_file: .env.development
  web:
    image: rails
    build: .
    volumes:
      - .:/app
    ports:
      - "3000:3000"
      - "5173:5173" # 添加Vite端口映射
    depends_on:
      - db
    env_file: .env.development

3. FullReload插件与Vite原生HMR冲突 #

vite-plugin-ruby已经内置了针对Rails视图、路由文件的热重载支持，同时Vite原生的HMR（模块热替换）会自动处理app/frontend下的前端文件。你额外添加的FullReload插件会强制页面全量刷新，反而干扰Vite的HMR机制，导致热重载异常。

修复方法：
移除vite-plugin-full-reload插件及其配置，保留Vite原生HMR和vite-plugin-ruby的内置支持即可。

4. Docker文件系统性能限制（编译慢的核心原因） #

在Windows或Mac系统上，Docker的bind mount（本地卷）文件系统性能远低于宿主机，Vite监听文件变化和编译时会频繁读写磁盘，导致编译耗时过长。

优化建议：

• 确保node_modules/.vite目录被正确挂载或缓存，避免每次编译都重新生成缓存；
• Mac用户可尝试使用docker-sync替代原生bind mount，提升文件系统性能；
• Windows用户可启用WSL2后端，并将项目放在WSL文件系统内，大幅提升磁盘读写效率。

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