Docker化Vite构建的React应用时遭遇依赖预构建异常

本地基于Vite构建的React应用运行正常，但Docker化部署到服务器时出现如下错误：

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

提供的配置文件 #

Dockerfile #

# Use the official Node.js image as a base image
FROM node:18-alpine

# Set the working directory inside the container
WORKDIR /app

# Add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# Install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install @vue/cli@3.7.0 -g

# Start app
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

vite.config.js #

export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
    alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
    }
},
     build: {
        rollupOptions: {
          input: {
            main: resolve(__dirname, 'index.html'),
           }
       }
     }
     })

注：声明的是React应用，但vite.config.js中使用了Vue相关插件，存在配置冲突。

解决方案 #

1. 修正Vite配置的框架冲突 #

React项目需使用Vite官方的React插件，替换掉配置中的Vue插件。修改后的vite.config.js示例：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      }
    }
  }
})

2. 修复Dockerfile的关键问题 #

• 删除无用的@vue/cli安装命令，React项目无需该工具
• 补充复制项目源码的步骤（原Dockerfile仅复制了package.json，导致容器内没有index.html和源码文件，这是Vite找不到入口的核心原因）

修改后的Dockerfile：

# 使用官方Node.js镜像作为基础镜像
FROM node:18-alpine

# 设置容器内工作目录
WORKDIR /app

# 将node_modules的bin目录加入PATH
ENV PATH /app/node_modules/.bin:$PATH

# 复制依赖文件并安装
COPY package*.json ./
RUN npm install

# 复制项目所有源码文件
COPY . .

# 启动开发服务器，允许外部访问
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

3. 确认依赖完整性 #

确保项目package.json中已安装React对应的Vite插件，若未安装，在本地执行：

npm install @vitejs/plugin-react --save-dev

之后重新构建Docker镜像即可。

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