使用Vite的VueJS应用本地正常但Docker构建失败求助

可能的原因及对应解决方案 #

1. 缺失Vite配置文件 #

你的Dockerfile中未复制Vite的核心配置文件（如vite.config.js或vite.config.ts），本地构建时该文件存在，但容器内构建环境缺少它会导致Vite解析Vue文件逻辑异常。

修改Dockerfile，在COPY步骤中补充配置文件：

# Build env
FROM node:lts-alpine as build-npm-stage

WORKDIR /cno-vue
COPY package*.json ./
RUN npm install
COPY index.html ./
COPY vite.config.js ./  # 若项目用TS则改为vite.config.ts
COPY public ./public
COPY src ./src
COPY .env.production ./

RUN npm run build

# Run env
FROM nginx:stable-alpine
COPY --from=build-npm-stage /cno-vue/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

2. 换行符不兼容（Windows环境常见） #

本地Windows系统默认使用CRLF换行符，而Linux容器默认使用LF换行符，Vite的解析器对换行符格式敏感，会引发随机解析错误。

解决方法：

• 在项目根目录创建.gitattributes文件，强制所有文件使用LF换行：

  * text=auto eol=lf
  

• 若使用VS Code，可通过右下角的换行符选择器将所有文件切换为LF，重新保存后再执行构建。

3. Docker缓存异常 #

之前构建产生的缓存可能存在损坏，导致依赖包或文件读取异常。

清理缓存后重新构建：

docker build --no-cache --tag cesar/cno-client .

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