使用Docker构建Vite React应用时出现Rollup导入解析失败问题

错误Error: [vite]: Rollup failed to resolve import "@/pages/Private" from "/app/src/Main.tsx"的核心原因有两个：

1. Docker构建环境未包含vite.config.ts文件，导致Vite无法读取别名配置，无法解析@路径
2. vite.config.ts中错误配置了rollupOptions.external: './src'，将整个src目录标记为外部依赖，Rollup会跳过该目录下模块的解析

1. 修复Dockerfile，补充复制vite.config.ts #

修改Dockerfile，添加COPY vite.config.ts ./，确保构建环境能读取到Vite的配置文件：

FROM node:21.2.0-alpine3.18 as build
WORKDIR /app
COPY .npmrc ./
COPY src src/
COPY public public/
COPY package.json ./
COPY package-lock.json ./
COPY tailwind.config.js ./
COPY tsconfig.json ./
COPY postcss.config.js ./
COPY index.html ./
COPY vite.config.ts ./  # 新增这一行，复制Vite配置文件
RUN npm install --silent
RUN npm run build

2. 移除vite.config.ts中的错误external配置 #

rollupOptions.external: './src'会让Rollup认为src下所有文件都是外部依赖，不会解析别名对应的模块，直接删除该配置段：

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

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(() => {
  return {
    build: {
      outDir: './build',
      // 移除下面这段错误配置
      // rollupOptions: {
      //   external: './src',
      // },
    },
    plugins: [react()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  };
});

验证操作 #

重新执行Docker构建命令，检查构建过程是否不再出现解析错误，确认build目录正常生成产物即可。

你的tsconfig配置是正确的：baseUrl和paths用于TypeScript语法解析，Vite的resolve.alias用于Rollup构建解析，两者保持一致即可。本地构建正常是因为本地存在完整的配置文件且无错误配置，Docker环境因缺少配置文件才触发问题。

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