Docker构建Vite应用报错：ContextGlobal.tsx解析失败，本地构建正常

针对你遇到的Docker构建Vite项目时出现的解析错误，以下是几个可尝试的解决方向：

• 检查文件编码格式
  容器环境可能对文件编码更敏感，确保ContextGlobal.tsx是UTF-8无BOM格式。本地编辑器可能默认保存为带BOM的UTF-8，在容器中解析时会触发首行解析错误。可以用编辑器（如VS Code）将文件转存为UTF-8无BOM后重新构建。

• 强制依赖版本与本地一致
  本地和Docker容器中安装的依赖版本可能存在差异，导致Vite对import.meta.env的解析逻辑不一致。解决方法：
  将本地的package-lock.json（npm）或yarn.lock（yarn）一同复制到容器中，确保依赖版本完全匹配：

  FROM node:16.20-alpine3.17 as builder
  WORKDIR /usr/src/app
  COPY package.json package-lock.json .
  RUN npm install
  COPY . .
  ENV VITE_PATH_TO_SERVER "https://172.10.10.3:8003/"
  RUN npm run build
  

• 验证环境变量注入方式
  尝试在构建命令中直接传递环境变量，替代Dockerfile中的ENV指令，确保变量在构建时被正确注入：

  FROM node:16.20-alpine3.17 as builder
  WORKDIR /usr/src/app
  COPY . .
  RUN npm install \
      && VITE_PATH_TO_SERVER="https://172.10.10.3:8003/" npm run build
  

• 检查文件完整性
  确认COPY指令未损坏文件内容，可在Dockerfile中添加查看文件的步骤，验证容器内的文件与本地一致：

  COPY . .
  RUN cat src/_context/ContextGlobal.tsx # 查看文件内容是否正常
  RUN npm install \
      && npm run build
  

• 排查Vite自定义配置冲突
  如果项目中配置了自定义Vite插件或转译规则（如Babel），可能在容器环境下触发解析异常。尝试临时禁用非必要的插件，逐步排查是否是插件导致的问题。

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