AdonisJS 6 + Vite + TailwindCSS Docker化CSS资源缺失问题求助

核心排查方向 #

问题根源在于Docker环境下静态资源构建不完整或路径配置不匹配，本地正常说明代码逻辑无问题，重点检查容器内的构建流程与配置项。

1. 修正Dockerfile的构建流程 #

确保Dockerfile包含完整的依赖安装与静态资源构建步骤，采用多阶段构建避免冗余依赖：

# 构建阶段
FROM node:20.11.1-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install # 安装所有依赖（含devDependencies，用于构建静态资源）
COPY . .
RUN npm run build # 执行AdonisJS构建命令，触发Vite打包静态资源

# 运行阶段
FROM node:20.11.1-alpine
WORKDIR /app
COPY --from=builder /app/package*.json ./
RUN npm install --production # 仅安装生产依赖
COPY --from=builder /app/build ./build
COPY --from=builder /app/public ./public # 复制构建后的静态资源产物
COPY --from=builder /app/.env ./ # 确保环境变量文件正确复制
EXPOSE 3333
CMD ["node", "build/bin/server.js"]

注意：若项目文件已移入容器内app目录，需保证所有COPY路径与/app工作目录对应

2. 检查Vite配置（vite.config.js） #

确保CSS入口文件被正确纳入构建，且manifest模式开启：

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: ['resources/css/file.css', 'resources/js/app.js'], // 明确指定CSS入口文件
      reload: ['resources/views/**/*.edge']
    })
  ],
  build: {
    manifest: true, // 必须开启manifest，AdonisJS依赖它查找资源映射
    outDir: 'public/assets' // 确保输出目录与Adonis配置一致
  }
})

3. 验证AdonisRC配置（adonisrc.ts） #

确认静态资源相关配置与Vite输出路径匹配：

import { defineConfig } from '@adonisjs/core/app'

export default defineConfig({
  assetsBundler: false, // 禁用内置bundler，使用Vite作为资源打包工具
  publicPath: 'public',
  vite: {
    enabled: true,
    manifestPath: 'public/assets/.vite/manifest.json', // 对应Vite生成的manifest文件路径
    entrypoints: ['resources/css/file.css', 'resources/js/app.js']
  }
})

4. 容器内路径验证 #

进入运行中的容器，手动检查资源是否存在：

• 执行docker exec -it <容器ID> sh进入容器终端
• 检查/app/public/assets/.vite/manifest.json是否存在，且包含resources/css/file.css的映射条目
• 检查/app/public/assets目录下是否有构建后的哈希命名CSS文件（如file.[hash].css）

如果manifest中无对应条目，说明Vite构建未处理该CSS文件，需核对入口配置；如果文件存在但路径不匹配，检查AdonisRC与Vite的路径配置是否统一。

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