Vite React项目Docker生产构建失败：找不到指定组件文件求助

我正尝试通过Docker将Vite React项目部署到生产环境，但构建过程始终失败，本地运行一切正常。

错误信息 #

vite v4.3.5 building for production...
transforming...
✓ 85 modules transformed.
✓ built in 1.73s
[vite:load-fallback] Could not load /app/src/components/layouts/DefaultLayout (imported by src/routes/accounts/Accounts.jsx): ENOENT: no such file or directory, open '/app/src/components/layouts/DefaultLayout'
error during build:
Error: Could not load /app/src/components/layouts/DefaultLayout (imported by src/routes/accounts/Accounts.jsx): ENOENT: no such file or directory, open '/app/src/components/layouts/DefaultLayout'
Service 'frontend' failed to build: The command '/bin/sh -c npm run build' returned a non-zero code: 1

相关代码片段 #

App.jsx 顶部代码 #

import "./App.css";
import DefaultLayout from "@/components/layouts/DefaultLayout";

Dockerfile 内容 #

FROM node:lts-alpine AS build
RUN apk add --no-cache python3 g++ make
RUN apk update && apk upgrade

WORKDIR /app
COPY . .

RUN npm install -g vite
RUN npm install
RUN npm run build

FROM ubuntu As prod
RUN apt-get update
RUN apt-get install nginx -y
COPY --from=build /app/dist /var/www/html/
EXPOSE 90 
CMD ["nginx","-g","daemon off;"]

vite.config.js 内容 #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dns from "dns";
import * as path from "path";

dns.setDefaultResultOrder("verbatim");

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist",
  },
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
  server: {
    watch: {
      usePolling: true,
    },
    host: true,
    strictPort: true,
    port: 90,
  },
});

问题原因与解决办法 #

1. 文件名大小写不匹配 #

Linux系统（Docker容器基于Linux）对文件名大小写敏感，而Windows/macOS默认不区分大小写，本地能正常运行的导入，在Docker中会因大小写不一致找不到文件。

• 检查src/components/layouts/下的实际文件名，确保和导入语句中的DefaultLayout完全一致（包括大小写）。

2. 缺失文件扩展名 #

Vite开发环境允许省略.jsx这类扩展名，但生产构建时可能无法自动解析，尤其是Docker环境中。

• 修改导入语句，补充完整扩展名：

  import DefaultLayout from "@/components/layouts/DefaultLayout.jsx";
  

3. .dockerignore 排除了必要文件 #

如果.dockerignore中包含了src/components/layouts/相关路径，会导致COPY命令无法将文件复制到容器内。

• 编辑.dockerignore，只保留必要的排除项，示例：

  node_modules
  .git
  dist
  .env
  

4. 验证容器内文件路径 #

可以在Dockerfile中临时添加命令，确认文件是否存在：

• 在RUN npm run build前添加：

  RUN ls -la /app/src/components/layouts/
  

  构建时会输出该目录下的文件列表，直接确认DefaultLayout相关文件是否存在。

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