React TypeScript Vite项目Docker化遇问题：入口解析错误与404异常

问题根源分析 #

你的Dockerfile路径拷贝逻辑存在问题，加上多余的main字段干扰了Vite的入口解析，导致出现404错误。

1. 移除package.json中多余的main字段 #

Vite项目以index.html作为入口，不需要Node.js的main字段，直接删除你添加的"main": "src/main.tsx"配置，避免干扰Vite的入口识别逻辑。

2. 修正Dockerfile的拷贝路径 #

假设你的本地项目结构是：

本地项目根目录/
├─ sv_ui_v1/
│  ├─ package.json
│  ├─ index.html
│  ├─ src/
│  └─ vite.config.ts
└─ Dockerfile

原Dockerfile中先单独拷贝sv_ui_v1/package.json，再拷贝整个根目录，会导致项目结构混乱，Vite无法找到正确的入口文件。修正后的Dockerfile如下：

FROM node:20 AS dev

WORKDIR /app

# 优先拷贝依赖配置文件，利用Docker缓存
COPY sv_ui_v1/package.json ./
COPY sv_ui_v1/package-lock.json* ./

RUN npm install

# 拷贝整个sv_ui_v1目录的项目文件
COPY sv_ui_v1/ .

EXPOSE 5173

CMD ["npm", "run", "dev"]

3. 额外检查项 #

• 确认sv_ui_v1目录下的index.html中，script标签正确指向入口文件：

  <script type="module" src="/src/main.tsx"></script>
  

• 启动容器时必须做端口映射，执行命令：docker run -p 5173:5173 你的镜像名称

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