Docker部署Vite+Vue3前端应用遇入口点识别失败问题求助

问题原因 #

1. Dockerfile未复制项目源码：原配置仅拷贝了package.json，容器内的工作目录缺少index.html和src等核心文件，导致Vite启动时找不到入口。
2. 冗余依赖安装：全局安装@vue/cli完全没必要，项目基于Vite构建，和Vue CLI工具无关。
3. Vite配置生效范围错误：rollupOptions.input放在build字段下，仅在生产构建时生效，开发模式下Vite不会读取这个配置，默认会去根目录找index.html。

解决方案 #

1. 修改Dockerfile #

更新配置，复制全部项目文件，并移除无用的Vue CLI安装：

# base image
FROM node:16.3.0-alpine

# set working directory
WORKDIR /app

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

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

# 复制所有项目源码到容器内
COPY . .

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

2. 调整Vite配置（可选但推荐） #

确保配置文件导入必要模块，并移除冗余的build入口配置（因为默认就是根目录index.html）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path' // 补充导入resolve方法

export default defineConfig({
    plugins: [vue(), vueJsx()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
    // 开发模式下Vite默认读取根目录index.html，无需额外配置入口
})

验证步骤 #

1. 重新构建Docker镜像：

docker build -t vue-vite-demo .

2. 启动容器并映射端口：

docker run -d -p 5173:5173 vue-vite-demo

3. 访问http://localhost:5173，应用应该能正常加载。

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